1.父子组件间的通信
我们都知道通常来说父与子组件的之间都是props 或者 $emit 来进行数据的相互通信
如下 子组件接受父组件的数据 props方法:
这个很简单就不去介绍说明了。
同过props我们可以获取父组件的数据渲染在子组件想要的位置上,子组件就不用去进行数据的请求
但同时它右存在一个问题,就是在获取父组件的数据,子组件通过事件的触发它也会同时改变父组件的数据,虽然在有的情况下这样是可行的,
但如果是在一个复杂的项目上,许多子组件共同获取父组件的数据话,就会产生不必要的麻烦。
这样就会产生一个问题,如果我们获取父组件的数据,改动的仅是当前子组件改动的数据,如下改动
我们获取data里面的直接数据,可以在子组件理return一个对象来保存从父组件获取的数据,在利用mounted函数中转数据给子组件的对象,
从而在事件触发的时候改变子组件数据,如图所示,我利用子组件中的b对象,在mounted函数中获取父组件下来的数据,然后改动b的数据
达到不改变父组件的数据,也不会报错。
2.单一事件管理组件通信
不多说,直接上代码。
注意两个点,
1.在通信组件间通信时,首先准备一个空的vue对象,只用它的$emit和$on 放在,在我们要发出数据的组件上用$emit方法帮数据
抛出去,在接受数据的对象上的mounted函数上用$on接收过来,然后进行替换。
2.在接受数据的组件上$on方法的回调函数内this的指向问题,要么预留this,要么函数绑定this 不然数据接受对象出错。