利用事件总线方式实现兄弟组件传值

160 阅读1分钟

第一步:

在main.js上new 出一个新的vue实例化对象,挂载到当前使用的vue的原型上并起个属性名叫$bus,见下图

image.png

第二步:

image.png

image.png

第三步:

image.png

总体来看步骤:

image.png

注意点:组件加载顺序,注意这里是两个组件都在mounted里面触发方法的:

image.png

在app.vue中组件的加载是异步的:

image.png

image.png

★注意这里是两个组件都在mounted里面触发方法的 两个组件加载的顺序 和你使用时候 使用顺序有关 比如child-new在前面就先执行 child-new2在后面就后执行 补充★ 通过事件总线方式,我们知道了,两个组件实际上在App.vue 里面的加载是异步的,组件2里面使用created调用方法,肯定比组件1 里面使用mounted加载的块,使用事件总线是需要先监听事件,这样 自定义事件触发的时候才可以被知道