一.递归组件向外传递数据直接用$emit是无法实现的。因为是递归的原因。
2.解决方法:
1方法1::用provide,inject方法实现。这种实现方法是实现爷爷组件和孙子组件通信的常用方法之一。但是逻辑上,爷爷组件和孙子组件之间是有耦合关系。如果组件封装需要尽量实现解耦,这种方式是有缺点的。
2.方法2:用eventBus实现:这种方法用在兄弟组件之间通信很常见。当然也可以用在爷爷组件和孙子组件之间的传递数据。
用这种方法实际上是用一个中介来传递数据,可以实现递归组件和使用它的组件之间的解耦。
来创建出我们的eventBus,我们把它命名为bus.js:
import Vue from 'vue';
export default new Vue();
在递归组件和使用它的组件同时引入:
import Bus from 'common/js/bus.js';
在递归组件里面触发事件:
methods: {
addCart(event) {
Bus.$emit('getTarget', event.target);
}
}
在使用递归组件的父组件里面监听事件:
created() {
Bus.$on('getTarget', target => {
console.log(target);
});
}
方法3:使用vuex方法,这种方法不加说明,肯定是可以实现的。缺点是:如果小项目,只是个别组件需要多级传递数据,引入vuex方法显然有点多余。