vuejs组件道道通（vue开发隧道使用的插件）

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

它适用于以下场景：

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

向上找到最近的指定组件——findComponentUpward

// 由一个组件，向上找到最近的指定组件
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 };

比如下面的示例，有组件 A 和组件 B，A 是 B 的父组件，在 B 中获取和调用 A 中的数据和方法：

<!-- component-a.vue -->
<template>
 <div>
 组件 A
 <component-b></component-b>
 </div>
</template>
<script>
 import componentB from './component-b.vue';
 export default {
 name: 'componentA',
 components: { componentB },
 data () {
 return {
 name: 'Aresn'
 }
 },
 methods: {
 sayHello () {
 console.log('Hello, Vue.js');
 }
 }
 }
</script>

<!-- component-b.vue -->
<template>
 <div>
 组件 B
 </div>
</template>
<script>
 import { findComponentUpward } from '../utils/assist.js';
 export default {
 name: 'componentB',
 mounted () {
 const comA = findComponentUpward(this, 'componentA');
 
 if (comA) {
 console.log(comA.name); // Aresn
 comA.sayHello(); // Hello, Vue.js
 }
 }
 }
</script>

向上找到所有的指定组件——findComponentsUpward

// 由一个组件，向上找到所有的指定组件
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 };

向下找到最近的指定组件——findComponentDownward

// 由一个组件，向下找到最近的指定组件
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 };

向下找到所有指定的组件——findComponentsDownward

// 由一个组件，向下找到所有指定的组件
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 };

找到指定组件的兄弟组件——findBrothersComponents

// 由一个组件，找到指定组件的兄弟组件
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 是不会重复的，借此我们可以从一系列兄弟组件中把自己排除掉。