Vue 非父子组建的通信方式

前边已经讲过父子组建之间的通讯方式 现在记录下非父子组建之间的通信方式

• 非父子组建通信通信需要借助到一个自定义文件 bus.js

// 在utils 文件夹下定义一个 eventbus.js 文件
// 引入并对外声明事件方法
import Vue from "vue";
const eventbus = new Vue()
export default eventbus

公共文件创建完之后到自己的具体页面组建中

组建1 这里同时记录传值和接收值的方法

    // 首先导入刚在自定义的bus 文件
    import eventbus from "../Utils/bus";
    // 在模板中声明一个按钮事件
    <button @click="meHello">我说</button>
    // 在methods中借助 eventbus 实现事件
    methods: {
        meHello() {
        // 这里是我要想另外一个事件传值
        eventbus.$emit("meSay", "你也666");
        }
    }
    
    // 在mounted 中接受其它组建传过来的值
    mounted() {
        eventbus.$on("sayYes", (value) => {
            console.log("jack 说的的是" + value);
        });
    },

• 组建1 中的事件到这就结束了

看一下另外一个组建中的定义 跟这里其实是一样的只是事件跟接收反过来

// 首先还是要先引用bus 文件
import bus from "../Utils/bus.js";
// 同样在模板中定义我要对外传值的触发事件 button
<button @click="sayHello">say Hello</button>
// 实现我要传值的定义事件
methods: {
    sayHello() {
        bus.$emit("sayYes", "老铁666");
    },
},
// 我接收其它组建的传值
mounted() {
    bus.$on("meSay", (value) => {  // 这里为了避免this指向所以使用了箭头函数
        console.log("me说的是" + value);
    });
},

到这非父子组建通信就实现了