Vue 组件通信

一、父组件向子组件通信（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)
})