Vue 实现的递归组件如何向外传递事件和数据

一.递归组件向外传递数据直接用$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方法显然有点多余。