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 不然数据接受对象出错。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容