[JavaScript知识库]Vue组件传值

父组件向子组件传值

在子组件标签上绑定自定义属性，值可以是data里面的数据，如:

<child1 :msg='btnMessage'></child1>

然后再子组件中用props接受自定义属性名，比如：

props:["msg"],

子组件向父组件传值

在子组件标签中绑定自定义事件，如：

<child1 @update:count='change'></child1>

然后在子组件中?，使用this.$emit('自定义事件名'，要传递的数据)

methods: {
   add(){
        this.$emit('update:count',this.mes)
   }
},

?然后在父组件change方法中，写this.XXX = mes,就可以改变或者添加到父组件的data里面

通过EventBus进行兄弟间组件通讯

首先在main.js文件中定义一个新的eventBus对象，其实他是一个全新的Vue实例

// main.js
import Vue from 'vue'
import App from './App'
 
export const eventBus = new Vue()
 
new Vue({
    el: '#app',
    render: h => h(App)
})

然后在需要通信的兄弟组件中导入main.js

import { eventBus } from '../main'

发送消息

methods: {
    messageSister() {
        eventBus.$emit('brotherSaid', '妈妈说，该做作业了！(^_^)!!!')
    }
}

?接收消息

created() {
    eventBus.$on('brotherSaid', (message) => {
        this.fromBrother = message
    })
}