兄弟组件使用中央事件总线进行传值

兄弟组件使用中央事件总线进行传值

 

对于非父子组件通讯:使用 空实例/中央事件总线. VueX

当项目业务复杂程度不高,可以选用中央事件总线解决当项目业务十分庞大时,一般首选VueX**

 

中央事件总线 语法:

let eventBus = new Vue()
eventBus.$emit("自定义事件名", 数据) // 触发事件
eventBus.$on("自定义事件名",(携带的形参)=>{处理的箭头函数}) //监听事件

 

需求:组件1中的msg传输到组件2

 

组件1

利用 eventBus.$emit("自定义事件名", 数据) 来发送值

let child1 = {
            template: "<div>组件1-{{msg}} <button @click='fn'>点击传递数据</button></div>",
            data() {
                return {
                    msg: "张三"
                }},
            methods: {
                fn() {
                    eventBus.$emit("send", this.msg)
   }}};

组件之间的通讯采用 eventBus.$on 与 eventBus.$emit

 

组件2

利用 eventBus.$on("自定义事件名",(携带的形参)=>{处理的箭头函数}) .来接收值

let child2 = {
            template: "<div>组件2-{{inmsg}}</div>",
            data() {
                return {
                    inmsg: ""
                }},
            mounted() {
                eventBus.$on("send", (val) => {
                    this.inmsg = val
   })}};

 

父级对象中需要声明

一定要为 eventBus 进行对象的声明才能使用

let eventBus = new Vue()
new Vue({
            el: '#app',
            components: {
                child1,
                child2
            }})