VUE实现父子组件传值以及递归组件的传值

父组件

<engineer :viewer=“viewer” @model=“getModel”>

注意：递归组件向外传递数据直接用$emit是无法实现的。

解决方法：

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方法显然有点多余。
[vue 中父子组件传值：props和$emit](()
[vue中父子组件传值问题 通过props 和 $emit()方法](()
[vue父子组件props传值，如何在子组件method里拿到父组件数据](()