vue中兄弟组件之间消息传递，使用$emit,$on,eventBus

vue中兄弟组件之间消息传递，使用 $emit,$on,eventBus

• EventBus 称为事件总线

• $emit(“事件名称”，“参数”)--------发送事件

• $on(“事件名称”，“接收参数”)-------接受事件

• EventBus可以是全局创建一个实例，在main.js中Vue.prototype.$eventBus = new Vue()

兄弟组件之间消息传递例子（子组件MyList输入框输入一个文本传送到子组件MyName显示）：

• main.js全局创建EventBus

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false
Vue.prototype.$eventBus = new Vue();

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

• 父组件：

<template>
    <div class="menu">
        <!-- 子组件MyList -->
        <my-list></my-list>
        <!-- 子组件MyName -->
        <my-name></my-name>
    </div>
</template>

<script>
import MyList from '@/pages/user/children/MyList'
import MyName from '@/pages/user/children/MyName'

export default {
    components:{
        MyList,
        MyName 
    },
    
    data(){
        return{
            
        }
    }
}
</script>

• 子组件MyList,用于发送事件

<template>
    <div class="my-list"> 
        <label>子组件MyList输入框:</label><input type="text"  v-model="listLevel" @change="levelChange(listLevel)"/>
    </div>
</template>

<script>
export default {
    data(){
        return{
            listLevel:""
        }
    },

    methods:{
        levelChange(val){
           this.$eventBus.$emit("level-change",this.listLevel)  //$emit用来发送事件
        }
    }
}
</script>

• 子组件MyName,用于接收事件

<template>
    <div class="my-name">
        <p>子组件MyName获取数据:{{nameLevel}}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            nameLevel:"",
        }
    },

    mounted(){
        this.$eventBus.$on("level-change",(val) => {
            this.nameLevel = val;
        })
    }
}
</script>

• 输出：
  
• EventBus除了可以全局创建之外，还可以单独创建一个文件，如：eventBus.js文件，在组件中单独引用使用

1.在src根目录下创建eventBus.js文件

//eventBus.js文件
import Vue from 'vue'
export default new Vue()

2.在组件中使用，如在本案例中组件MyList中使用：

<template>
    <div class="my-list"> 
        <label>子组件MyList输入框:</label><input type="text"  v-model="listLevel" @change="levelChange(listLevel)"/>
    </div>
</template>

<script>
import eventBus from '@/eventBus.js'   //引入eventBus.js文件
export default {
    data(){
        return{
            listLevel:""
        }
    },

    methods:{
        levelChange(val){
           eventBus.$emit("level-change",this.listLevel) //直接使用eventBus
        }
    }
}
</script>

3…在本案例中组件MyName中使用如同第2步骤，同样也能输出结果

好啦，拜拜啦！