vue组件间的通信问题

1.父子组件间的通信

我们都知道通常来说父与子组件的之间都是props 或者 $emit 来进行数据的相互通信

如下 子组件接受父组件的数据 props方法：

这个很简单就不去介绍说明了。

同过props我们可以获取父组件的数据渲染在子组件想要的位置上,子组件就不用去进行数据的请求

但同时它右存在一个问题，就是在获取父组件的数据，子组件通过事件的触发它也会同时改变父组件的数据，虽然在有的情况下这样是可行的，

但如果是在一个复杂的项目上，许多子组件共同获取父组件的数据话，就会产生不必要的麻烦。

这样就会产生一个问题，如果我们获取父组件的数据，改动的仅是当前子组件改动的数据，如下改动

我们获取data里面的直接数据，可以在子组件理return一个对象来保存从父组件获取的数据，在利用mounted函数中转数据给子组件的对象，

从而在事件触发的时候改变子组件数据，如图所示，我利用子组件中的b对象，在mounted函数中获取父组件下来的数据，然后改动b的数据

达到不改变父组件的数据，也不会报错。

2.单一事件管理组件通信

不多说，直接上代码。

注意两个点，

1.在通信组件间通信时，首先准备一个空的vue对象，只用它的$emit和$on 放在，在我们要发出数据的组件上用$emit方法帮数据

抛出去，在接受数据的对象上的mounted函数上用$on接收过来，然后进行替换。

2.在接受数据的组件上$on方法的回调函数内this的指向问题，要么预留this，要么函数绑定this 不然数据接受对象出错。