新手写vue项目 一不小心就掉到坑坑里 ,还好,我还能上来 。废话不必说,拉你出坑。
网上有太多 父组件----->子组件、子组件------>父组件。
今天就说 兄弟组件A、B相互的通信 怎么实现。
1、首先先创建文件VueEvent.js 里面一个vue实例
vueEvent.js
import Vue from 'vue';
var VueEvent = new Vue();
export default VueEvent;
然后就可以通过import 方式 引入到你的组件去
import VueEvent from "../common/js/VueEvent.js";
2、组件A
let that = this;//最重要的一步
created() {
let that = this;//最重要的一步
VueEvent.$on("applyInfoData", function(val) {
that.applyData = JSON.parse(JSON.stringify(val));
console.log("兄弟组件传值=", that.applyData);
});
console.log("=", this.applyData);
},
3、组件B
VueEvent.$emit("applyInfoData",data); //$emit这个方法会触发一个事件
注意this的指向 不然$on接受到但无法使用的问题