已经介绍了两种组件间通信的方法&＃xff1a;provide / inject 和 dispatch / broadcast。它们有各自的使用场景和局限&＃xff0c;比如前者多用于子组件获取父组件的状态&＃xff0c;后者常用于父子组件间通过自定义事件通信。
本文将介绍第 3 种组件通信方法&＃xff0c;也就是 findComponents 系列方法&＃xff0c;它并非 Vue.js 内置&＃xff0c;而是需要自行实现&＃xff0c;以工具函数的形式来使用&＃xff0c;它是一系列的函数&＃xff0c;可以说是组件通信的终极方案。findComponents 系列方法最终都是返回组件的实例&＃xff0c;进而可以读取或调用该组件的数据和方法。
它适用于以下场景&＃xff1a;
- 由一个组件&＃xff0c;向上找到最近的指定组件&＃xff1b;
- 由一个组件&＃xff0c;向上找到所有的指定组件&＃xff1b;
- 由一个组件&＃xff0c;向下找到最近的指定组件&＃xff1b;
- 由一个组件&＃xff0c;向下找到所有指定的组件&＃xff1b;
- 由一个组件&＃xff0c;找到指定组件的兄弟组件。
5 个不同的场景&＃xff0c;对应 5 个不同的函数&＃xff0c;实现原理也大同小异。
实现&＃xff1a;
5 个函数的原理&＃xff0c;都是通过递归、遍历&＃xff0c;找到指定组件的 name 选项匹配的组件实例并返回。
向上找到最近的指定组件——findComponentUpward
先看代码&＃xff1a;
findComponentUpward 接收两个参数&＃xff0c;第一个是当前上下文&＃xff0c;比如你要基于哪个组件来向上寻找&＃xff0c;一般都是基于当前的组件&＃xff0c;也就是传入 this&＃xff1b;第二个参数是要找的组件的 name 。
findComponentUpward 方法会在 while 语句里不断向上覆盖当前的 parent 对象&＃xff0c;通过判断组件(即 parent)的 name 与传入的 componentName 是否一致&＃xff0c;直到直到最近的一个组件为止。
与 dispatch 不同的是&＃xff0c;findComponentUpward 是直接拿到组件的实例&＃xff0c;而非通过事件通知组件。比如下面的示例&＃xff0c;有组件 A 和组件 B&＃xff0c;A 是 B 的父组件&＃xff0c;在 B 中获取和调用 A 中的数据和方法&＃xff1a;
使用起来很简单&＃xff0c;只要在需要的地方调用 findComponentUpward 方法就行&＃xff0c;第一个参数一般都是传入 this&＃xff0c;即当前组件的上下文(实例)。
上例的 comA&＃xff0c;保险起见&＃xff0c;加了一层 if (comA) 来判断是否找到了组件 A&＃xff0c;如果没有指定的组件而调用的话&＃xff0c;是会报错的。
findComponentUpward 只会找到最近的一个组件实例&＃xff0c;如果要找到全部符合要求的组件&＃xff0c;就需要用到下面的这个方法。
向上找到所有的指定组件——findComponentsUpward
代码如下&＃xff1a;
与 findComponentUpward 不同的是&＃xff0c;findComponentsUpward 返回的是一个数组&＃xff0c;包含了所有找到的组件实例。
findComponentsUpward 的使用场景较少&＃xff0c;一般只用在递归组件里面(后面小节会介绍)&＃xff0c;因为这个函数是一直向上寻找父级(parent)的&＃xff0c;只有递归组件的父级才是自身。事实上&＃xff0c;iView 在使用这个方法也都是用在递归组件的场景&＃xff0c;比如菜单组件 Menu。由于递归组件在 Vue.js 组件里面并不常用&＃xff0c;那自然 findComponentsUpward 也不常用了。
向下找到最近的指定组件——findComponentDownward
代码如下&＃xff1a;
context.$children 得到的是当前组件的全部子组件&＃xff0c;所以需要遍历一遍&＃xff0c;找到有没有匹配到的组件 name&＃xff0c;如果没找到&＃xff0c;继续递归找每个 的
children&＃xff0c;直到找到最近的一个为止。
来看个示例&＃xff0c;仍然是 A、B 两个组件&＃xff0c;A 是 B 的父组件&＃xff0c;在 A 中找到 B&＃xff1a;
示例中的 A 和 B 是父子关系&＃xff0c;因此也可以直接用 ref 来访问&＃xff0c;但如果不是父子关系&＃xff0c;中间间隔多代&＃xff0c;用它就很方便了。
向下找到所有指定的组件——findComponentsDownward
如果要向下找到所有的指定组件&＃xff0c;要用到 findComponentsDownward 函数&＃xff0c;代码如下&＃xff1a;
这个函数实现的方式有很多&＃xff0c;这里巧妙使用 reduce 做累加器&＃xff0c;并用递归将找到的组件合并为一个数组并返回&＃xff0c;代码量较少&＃xff0c;但理解起来稍困难。
用法与 findComponentDownward 大同小异&＃xff0c;就不再写用例了。
找到指定组件的兄弟组件——findBrothersComponents
代码如下&＃xff1a;
相比其它 4 个函数&＃xff0c;findBrothersComponents 多了一个参数 exceptMe&＃xff0c;是否把本身除外&＃xff0c;默认是 true。寻找兄弟组件的方法&＃xff0c;是先获取 context.$parent.$children&＃xff0c;也就是父组件的全部子组件&＃xff0c;这里面当前包含了本身&＃xff0c;所有也会有第三个参数 exceptMe。Vue.js 在渲染组件时&＃xff0c;都会给每个组件加一个内置的属性 _uid&＃xff0c;这个 _uid 是不会重复的&＃xff0c;借此我们可以从一系列兄弟组件中把自己排除掉。
举个例子&＃xff0c;组件 A 是组件 B 的父级&＃xff0c;在 B 中找到所有在 A 中的兄弟组件(也就是所有在 A 中的 B 组件)&＃xff1a;
在 ① 的位置&＃xff0c;打印出的内容为空数组&＃xff0c;原因是当前 A 中只有一个 B&＃xff0c;而 findBrothersComponents 的第三个参数默认是 true&＃xff0c;也就是将自己除外。如果在 A 中再写一个 B&＃xff1a;
这时就会打印出 [VueComponent]&＃xff0c;有一个组件了&＃xff0c;但要注意在控制台会打印两遍&＃xff0c;因为在 A 中写了两个 B&＃xff0c;而 console.log 是在 B 中定义的&＃xff0c;所以两个都会执行到。如果你看懂了这里&＃xff0c;那应该明白打印的两遍 [VueComponent]&＃xff0c;分别是另一个 (如果没有搞懂&＃xff0c;要仔细琢磨琢磨哦)。
如果将 B 中 findBrothersComponents 的第三个参数设置为 false&＃xff1a;
此时就会打印出 [VueComponent, VueComponent]&＃xff0c;也就是包含自身了。
以上就是 5 个函数的详细介绍&＃xff0c;get 到这 5 个&＃xff0c;以后就再也不用担心组件通信了。
京公网安备 11010802041100号