vue.js中父组件传递值给子组件_父元素传递参数到子元素-优快云博客

本文深入讲解Vue.js中组件之间的通信机制，包括父组件如何通过属性传递数据给子组件，子组件如何利用VueBus向父组件发送事件。同时，介绍了局部与全局组件的使用方法，以及在main.js中注册全局组件的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.父组件传递值给子组件
               1.1 父需要声明子组件，引入子组件对象，声明方式如下
               import 子组件对象 from './xxx.vue';
               {
                   components:{
                       组件名：子组件对象
                   }
               }
           2.全局组件，使用更为方便，不需要声明，直接用
           3.在main.js中引入一次，在main.js中使用vue.component('组件名'，组件对象)；
           所有的组件就可以直接通过组件名使用；
               import headerVue from './component/header.vue'
               import bodyVue from '/.component/body.vue'
               声明全局组件
               Vue.component('headerVue',headerVue)
               // 第一个是参数名称，第二个参数是实际对象
               Vue.component('bodyVue',bodyVue)
               Vue.component('footerVue',footerVue)
           4.父传子
               父组件通过子组件的属性值进行传递
                   方式有2：
                   常量 prop1="常量值"
                   变量 :prop2="变量名"
               子组件需要声明：
                   -根属性props:['prop1','prop2']
                   -在页面中直接使用{{prop1}}
                   -在js中应该如何使用prop1？ this.prop1获取
           5.子向父组件通信（vuebus）
               通过new Vue()这样的一个对象，来$on('事件名'，function(prop1,pro2))
           另一个组件引入同一个vuebus，来$emit('事件名'，prop1，prop2)