当前位置 : 主页 > 编程语言 > java >

Vue黑科技之组件万能通信方法

来源:互联网 收集:自由互联 发布时间:2022-10-26
vue内置的组件通信一般来说满足各种场景,但是同时在某一些特定的情况下,会有一些局限。 这次要给大家说一个vue的黑科技,需要自己实现的方法。可以称之为:vue黑科技。组件万能


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选项匹配的组件实例并返回。一定要记得,它们获取到的是实例!

上一篇:React之ref的高阶用法
下一篇:没有了
网友评论