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.jsdata: {
    eventHub: new Vue()
}// 组件Athis.$root.eventHub.$emit('eventName', 'I am Mazey!')// 组件Bthis.$root.eventHub.$on('eventName', msg => {
    console.log(msg)
})

作者：后除
链接：https://www.jianshu.com/p/b7f9a90d8d17