玩转Vue组件通信--终极版

引言

简要总结于 掘金小册->Vue组件精讲
作者:Aresn iView作者

组件通信不管是在业务组件开发还是UI组件开发基本都是不可避免的,实际项目开发中一般会选择引入vuex,这里关于vuex不做过多介绍,不了解的可直接去 vuex官网 查看。这里主要使用vue自身的一些东西来达到组件通信的目的。

provide / inject

provide / inject 是 Vue.js 2.2.0 版本后新增的 API,在文档中这样介绍 :

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。

并且文档中有如下提示:

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

下面简要描述使用的Demo

需要注意的是:

provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象(传入一个对象,对象为引用传递),那么其对象的属性还是可响应的。

派发与广播——自行实现 dispatch 和 broadcast 方法

$on 与 $emit

$on 与 $emit常用于父子组件的通信,在vue1.x中跨组件通信 $dispatch 和 $broadcast也是常用的api,在vue2.x中被废弃了。

$dispatch 和 $broadcast ,前者用于向上级派发事件,只要是它的父级(一级或多级以上),都可以在组件内通过 $on (或 events,2.x 已废弃)监听到,后者相反,是由上级向下级广播事件的。

废弃原因如下:

因为基于组件树结构的事件流方式有时让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱。

自行实现 dispatch 和 broadcast 方法

前提需要为每一个组件添加name属性的标识,方便递归与遍历查找。

上面两个方法,大家可自己测试!

找到任意组件实例——findComponents 系列方法

provide / inject 和 dispatch / broadcast。它们有各自的使用场景和局限,比如前者多用于子组件获取父组件的状态,后者常用于父子跨级组件间通过自定义事件通信。

findComponents 系列方法最终都是返回组件的实例,进而可以读取或调用该组件的数据和方法。

它适用于以下场景:

  • 由一个组件,向上找到最近的指定组件;
  • 由一个组件,向上找到所有的指定组件;
  • 由一个组件,向下找到最近的指定组件;
  • 由一个组件,向下找到所有指定的组件;
  • 由一个组件,找到指定组件的兄弟组件。
    5 个不同的场景,对应 5 个不同的函数,实现原理也大同小异。

下面为具体方法实现:

具体使用大家可自行测试!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复