优雅地跨层级获取vue组件实例

该文章由 leevare 发布于 ,归类于 Javascript

在实际的项目开发中,经常遇到组件一层嵌套一层的场景。当组件一两层还好,可以直接用$refs.A.$refs.B形式去获取组件的实例。但是,如果组件嵌套层级超过两层时,使用这种方式就不是那么方便了,尤其是获取兄弟组件节点的实例,更加困难。

vue 2.2版本时,新增了provide/inject属性,通过provide可以轻松地跨层级获取父组件的实例。

// 父组件
provide() {
  return { root: this };
},
// 子组件
inject: ['root'];

这就解决了从子级获取父级的问题。

但是父级怎么获取子级呢?

使用遍历递归的方式可以做到。通过给子组件设置一个名称,不断的递归$children,直到找到正确名称的组件为止。虽然,使用这种方式可以找到自组件实例,但是总是执行递归操作是一件对性能造成浪费的事情。

下面就介绍一下另一种解决办法。

在根组件中设置缓存变量,在每一个组件初始化或更新的时候将对应的实例或者HTMLElement添加到根组件的缓存中,为了实现每一次初始化和更新都调用,这里使用自定义指令。

核心代码如下

export default {
  install(Vue, options = {}) {
    const directiveName = options.name || "ref";
    Vue.directive(directiveName, {
      bind(el, binding, vnode) {
        binding.value(vnode.componentInstance || el, vnode.key);
      },
      update(el, binding, vnode, oldVnode) {
        if (oldVnode.data && oldVnode.data.directives) {
          const oldBinding = oldVnode.data.directives.find(
            directive => directive.name === directiveName
          );
          if (oldBinding && oldBinding.value !== binding.value) {
            oldBinding && oldBinding.value(null, oldVnode.key);
            binding.value(vnode.componentInstance || el, vnode.key);
            return;
          }
        }
        if (
          vnode.componentInstance !== oldVnode.componentInstance ||
          vnode.elm !== oldVnode.elm
        ) {
          binding.value(vnode.componentInstance || el, vnode.key);
        }
      },
      unbind(el, binding, vnode) {
        binding.value(null, vnode.key);
      }
    });
  }
};

这也是vue-ref的实现代码。

在根组件中通过provide向外提供设置实例与获取实例的几个关键方法。

provide() {
  return {
    setChildrenRef: (name, ref) => {
      this[name] = ref;
    },
    getChildrenRef: name => this[name],
    getRef: () => this
  };
},

使用指令的代码

Vue.use(vueRef, {name: 'ref'})

这样,在全局就有了v-ref指令,它有点类似于React的ref指令,可以在里面传递一个回调函数,第一个参数就是当前的实例。

<E ref="E" v-ref="c => setChildrenRef($refs.E.$options.name, c)"></E>

示例代码参见: https://github.com/DulJuly/vue-ref-demo

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒