vue内置的组件通信一般来说满足各种场景，但是同时在某一些特定的情况下，会有一些局限。
这次要给大家说一个vue的黑科技，需要自己实现的方法。可以称之为：vue黑科技。组件万能通信法。可以帮你找到任意组件。
它的适用场景如下：
由一个组件，向上找到最近的指定组件；
由一个组件，向上找到所有的指定组件；
由一个组件，向下找到最近的指定组件；
由一个组件，向下找到所有指定的组件；
由一个组件，找到指定组件的兄弟组件。
使用的时候推荐大家单独提炼出去 在需要的地方引入使用。
不过要注意的是，它返回的是组件的实例！
一： 向上找到最近的组件
function findComponentUpward (context, componentName) { let parent = context.$parent; let name = parent.$options.name; while (parent && (!name || [componentName].indexOf(name) < 0)) { parent = parent.$parent; if (parent) name = parent.$options.name; } return parent; } export { findComponentUpward };
findComponentUpward 接收两个参数，第一个为当前上下文，也就是说你要基于哪个组件往上找，这里我们就可以直接传入this即可。第二个参数则是你要找到的组件的name。
它会在while 循环中不断的向上覆盖当前的 parent 对象。通过判断该组件的 name 与传入的 componentname 是否一致。直到找到最近的组件为止。
二：向上找到所有的指定组件
// 由一个组件，向上找到所有的指定组件 function findComponentsUpward (context, componentName) { let parents = []; const parent = context.$parent; if (parent) { if (parent.$options.name === componentName) parents.push(parent); return parents.concat(findComponentsUpward(parent, componentName)); } else { return []; } } export { findComponentsUpward };
与 findComponentUpward 不同的是，findComponentsUpward 返回的是一个数组，包含了所有找到的组件实例（注意函数名称中多了一个“s”）。
findComponentsUpward 的使用场景较少，一般只用在递归组件里面，因为这个函数是一直向上寻找父级（parent）的，只有递归组件的父级才是自身.
三：向下找到最近的指定组件
function findComponentDownward (context, componentName) { const childrens = context.$children; let children = null; if (childrens.length) { for (const child of childrens) { const name = child.$options.name; if (name === componentName) { children = child; break; } else { children = findComponentDownward(child, componentName); if (children) break; } } } return children; } export { findComponentDownward };
context.$children 得到的是当前组件的全部子组件，所以需要遍历一遍，找到有没有匹配到的组件
name，如果没找到，继续递归找每个 $children 的 $children，直到找到最近的一个为止。
四：向下找到所有指定的组件
// 由一个组件，向下找到所有指定的组件 function findComponentsDownward (context, componentName) { return context.$children.reduce((components, child) => { if (child.$options.name === componentName) components.push(child); const foundChilds = findComponentsDownward(child, componentName); return components.concat(foundChilds); }, []); } export { findComponentsDownward };
这个函数实现的方式有很多，这里巧妙使用
reduce 做累加器，并用递归将找到的组件合并为一个数组并返回，代码量较少，但理解起来稍困难。与上面的findComponentDownward 差不多类似。
五：找到指定组件的兄弟组件
// 由一个组件，找到指定组件的兄弟组件 function findBrothersComponents (context, componentName, exceptMe = true) { let res = context.$parent.$children.filter(item => { return item.$options.name === componentName; }); let index = res.findIndex(item => item._uid === context._uid); if (exceptMe) res.splice(index, 1); return res; } export { findBrothersComponents };
相比其它 4 个函数，findBrothersComponents 多了一个参数
exceptMe，是否把本身除外，默认是 true。寻找兄弟组件的方法，是先获取
context.$parent.$children，也就是父组件的全部子组件，这里面当前包含了本身，所有也会有第三个参数 exceptMe。Vue.js 在渲染组件时，都会给每个组件加一个内置的属性
_uid，这个 _uid 是不会重复的，借此我们可以从一系列兄弟组件中把自己排除掉。
最后还是要叮嘱大家，这5个函数的原理都是通过递归，遍历找到指定组件的name选项匹配的组件实例并返回。一定要记得，它们获取到的是实例！
