一、父组件向子组件通信（Prop）
在子组件里面声明 props 可以接收父组件传过来的值实现父组件向子组件的单向通信。
// 父组件
<son title="后除"></title>
// 子组件
props: {
titile: {
type: String,
required: true
}
}
二、子组件向父组件通信
1.子组件使用 $emit 触发事件，父组件用 v-on 监听并接收值。
// 父组件
<son @sonEvent="parentListen"></son>
methods: {
parentListen (msg) {
console.log(msg)
}
}
// 子组件
this.$emit('sonEvent', 'I am Mazey!')
2.自定义组件的 v-model。
// 父组件
<m-test
v-model="parentMsg"></m-test>
{{ parentMsg }}
data: {
parentMsg: 0
}
// 子组件
<button @click="addsonMsg">addsonMsg</button>
{{ sonMsg }}
data () {
return {
sonMsg: 0
}
},
model: {
prop: 'sonMsg',
event: 'sonEvent'
},
methods: {
addsonMsg () {
this.$emit('sonEvent', ++this.sonMsg)
}
}
三、任意组件间通信
注册一个空的 Vue 实例作为中转站，做事件的监听。
// main.js
data: {
eventHub: new Vue()
}
// 组件A
this.$root.eventHub.$emit('eventName', 'I am Mazey!')
// 组件B
this.$root.eventHub.$on('eventName', msg => {
console.log(msg)
})
