Vue 组件通信

在子组件里面声明 props 可以接收父组件传过来的值实现父组件向子组件的单向通信。

// 父组件// 子组件props: {    titile: {        type: String,        required: true
    }
}

// 父组件methods: {
    parentListen (msg) {        console.log(msg)
    }
}// 子组件this.$emit('sonEvent', 'I am Mazey!')

// 父组件
    {{ parentMsg }}
    
data: {
    parentMsg: 0}// 子组件addsonMsg
{{ 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