不同组件间通信可以通过新建一个对象充当通信对象来实现。
1.新建一个对象A
2.在组件B中引入A对象, A.$emit('addShopCart',5); 5是传给回调函数的参数。
3.在组件C中引入A对象,A.$on('addShopCart',function(num){....})
B组件中发出一个名叫addShopCart的包裹,包裹里装着机密数字5,C组件说出了包裹名'addShopCart',所以拿到了包裹,并且可以对数字五进行进一步的处理。
具体代码如下
1.新建一个名为connect.js的文件
1 import Vue from 'vue'; 2 let connect = new Vue(); 3 export default connect;
2.在组件B中引入A对象, A.$emit('addShopCart',5);
1 import connect from '../common/connet.js' 2 export default { 3 data(){ 4 return { 5 num:1, 6 } 7 }, 8 methods:{ 9 addShopCart(){ 10 connect.$emit('addShopCart',this.num); 11 }, 12 }, 13 }
3.在组件C中引入A对象,A.$on('addShopCart',function(num){....})
import connect from './components/common/connet.js'; export default{ data(){ return{ picNum:0, } }, created(){ connect.$on('addShopCart',num=>{ this.picNum += num; }) }, }