Vue的组件如何传值（1）
Vue的组件如何传值？
父子通信的方式：
-
父向子传递数据是通过 props，
-
子向父是通过 $emit；
-
通过 $parent / $children 通信；
-
$ref，$refs 也可以访问组件实例；
父传子：
-
子组件在props中创建一个属性，用来接受父组件的传来的值，
-
在父组件注册子组件，通过属性绑定的形式，把需要传递给子组件的数据传递给子组件的内部供子组件使用。
-
然后在子组件标签中添加props属性，用以接收父组件传过来的值。
父传子简略总结：
-
父组件引入注册子组件；将父组件的自定义属性传递给子组件；<Zujian :zi_zujian="fu_zujian" />
-
子组件在props中创建一个属性，用以接收父组件传过来的值；
-
父传子显示的值 {{ users }}
父传子的介质是props，是向下传递。
子传父：
-
通过点击事件的方式，触发一个自定义事件，
-
将需要传递的值，作为$emit的值做第二个参数，该值将作为实参传递给响应自定义事件的方法，
-
在父组件当中，注册子组件，在子组件标签上监听自定义事件，并添加一个响应事件的处理方法。
子传父简略总结：
-
父组件里自定义一个方法，@ziclick="fuclick" （左子[自定义事件]右父[子传给父的值]）
-
子组件this.$emit('ziclick', '子的值')
-
父组件通过fuclick(res){'接收子的值res'}
子传父的介质是自定义事件，是向上传递。$emit可以作为一个事件流来看。
兄弟组件传值：
使用一个事件处理中心 event bus，const bus = new Vue()
A 组件 通过this.$emit('约定的值msg', res)
B 组件 通过this.$on(约定的值msg',res=>{console.log(res)})
父传子 props，示例：
<body> <div id="app"> <child :fname="name1"></child> </div> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> Vue.component('child',{ template: ` <div>child子组件接收：{{fname}}</div> `, props: ['fname'] }) const vm = new Vue({ el:'#app', data() { return { name1: '父组件要传递的值☞： 張三' } } }); </script> </body>
子传父：this.$emit，子传父通过事件触发的方式。示例：
<body> <div id="app"> <child @ztof="fafun"></child> </div> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> Vue.component('child',{ // template:` // <button>子组件</button> // `, data(){ return { zmsg:'子的信息xxxx' } }, created() { this.$emit('ztof',this.zmsg) } }) const vm = new Vue({ el:'#app', data() { return { } }, methods:{ fafun(zmsg){ console.log('zmsg :>> ', zmsg); //子的信息xxxx } } }); </script> </body>
兄弟组件之间的传参 eventBus，示例：
组件1：
data(){
return {
todoList:''
}
},
methods:{
addList:function(){
//重点： $emit自定义事件
eventBus.$emit('add',this.todoList)
}
}
组件2:
created:function(){
this.acceptList()
},
methods:{
acceptList:function(){
// 重点：$on接收事件
eventBus.$on('add',(message)=>{
this.lists.push({ name:message,isFinish:false })
})
}
}
