最近在学习Vue,组件化后不同组件之间如何通信，记录一下。
- Vue中组件通信时，数据流只能由父级传递给子级，通过props，子级传递信息给父级，通过$emit。
- 只有父子间能直接通信，兄弟（同级）之间，爷孙（隔代）之间都不能直接传递信息，只能利用父子通信来传递。
父子组件
子组件接受父组件的数据时，通过定义props来实现。子组件对父组件传递信息时，通过事件来传递。如下面的示例
http://js.jirengu.com/zuzikasoxe/2/edit
<div id="app">
<child :title="message" @click-child="message2 += $event "></child>
{{message2}}
</div>
Vue.component('child',{
props:['title'],
data(){
return{
msg: '+child发出的数据',
}
},
template:`<div>
<hr><div>
{{title}}<button @click="$emit('click-child',msg)">child</button>
<hr>
</div>
`
})
let app = new Vue({
el: "#app",
data: {
message: '父组件的一个数据',
message2: 'Hello',
},
})
父子组件通信
子组件中通过props中的title，绑定了父组件中的message，实现了数据传递。而通过$emit()将点击事件通知了父组件，实现了父子之间的通信。
爷孙通信
爷爷和孙子是不能直接通信的，只能通过爷爷传给儿子，儿子传给孙子。孙子传给儿子，儿子传给爷爷这样进行通信。
http://js.jirengu.com/jaquhoseqo/3/edit
<div id="app">
{{message2}}
<child :title="message" @click-add="message2 += $event" @click-grand-add="message2 += $event"></child>
</div>
Vue.component('child', {
props: ['title'],
data() {
return {
msg: '+child发出的数据',
}
},
template: `
<div>
<hr>
{{title}}
<button @click="$emit('click-add',msg)">child++</button>
<grand-son :tit="title" @click-grand-add="$emit('click-grand-add',$event)"></grand-son>
</div>
`
})
Vue.component('grand-son', {
props: ['tit'],
data() {
return {
msg: '+grandSon发出的数据',
}
},
template: `
<div>
<hr>
{{tit}}
<button @click="$emit('click-grand-add',msg)">grandSon++</button>
</div>
`
})
let app = new Vue({
el: "#app",
data: {
message: '父组件的一个数据',
message2: 'Hello',
},
})
爷孙组件的通信.png
儿子通过props得到爷爷的数据，孙子再通过props得到儿子的数据，进而得到爷爷的数据。孙子发出数据时，$emit首先通知到儿子，再通知到爷爷，最后爷爷进行相应操作。
兄弟（同级）组件间通信
定义一个公共的vue实例，一个组件传递数据时，向这个实例发送$emit通知，另一个组建用这个实例监听事件，进行相应的操作。
https://jsfiddle.net/50wL7mdz/527445/
<script src="https://unpkg.com/vue"></script>
<div id="app">
{{message}}
<child></child>
<child2></child2>
</div>
let bus = new Vue()
Vue.component('child', {
props: ['title'],
template: `
<div>
<hr>这里是child1
<button @click="fn">关闭button2</button>
</div>
`,
methods: {
fn(){
bus.$emit('click-child','child1想关闭child2')
}
}
})
Vue.component('child2', {
props: ['title'],
data() {
return {
msg: '这里是child2',
}
},
created: function() {
bus.$on('click-child',this.fn)
},
methods: {
fn(value){
this.msg += value
}
},
template: `
<div>
<hr>{{msg}}
<button>button2</button>
</div>
`
})
let app = new Vue({
el: "#app",
data: {
message: 'Hello',
},
})
兄弟组件通信
这段代码中bus就是一个公共的容器，使同级的兄弟组件中进行通信。
