Vue---兄弟组件通信(三种方式)
第一种:eventBus 新建一个js文件, 我这里叫做 bus.js, 文件内容: import Vue from 'vue'; export default new Vue(); 然后在你需要触发的 组件中引入 import bus from '文件路径' 执行:bus.$emit('触发名...
·
第一种:eventBus
新建一个js文件, 我这里叫做 bus.js,
文件内容:
import Vue from 'vue';
export default new Vue();
然后在你需要触发的 组件中引入 import bus from '文件路径'
执行:bus.$emit('触发名称', 传输的数据 )
最后在你需要的通信的另一个组件中 mounted生命周期钩子中执行如下:
bus.$on('触发名称', res => {
//写你需要的方法
})
第二种:直接在 main.js中 直接如下
然后其中一个兄弟组件 执行
this.$root.vm.$emit('触发名称', 传输的数据);
另一个兄弟组件中执行
this.$root.vm.$on('触发名称', 传输的数据);
第三种:同样是直接在 main.js
Vue.prototype.$vm = new Vue();
使用:this.$vm.$emit();
this.$vm.$on();
注意:emit 和 on 中 第一参数 触发名称 必须相同,同时二者原理一致
同时,需要关闭该通信,尤其是接口调用的时候,关闭方法 this.**.$off("通信名称")
如有问题 可以加我微信 dp319_
更多推荐
已为社区贡献3条内容
所有评论(0)