Vue组件跨层级获取组件操作

<!-- vm.$refs.p/this.$refs.p 获取DOM node -->
<p ref="p">hello</p>
<!-- vm.$refs.child/this.$refs.child 获取组件实例 -->
<child-component ref="child"></child-component>

//使用`provide` 在根组件提供数据 
provide() {
 return {
  //主动通知 将组件实例绑定在根组件上
  setChildrenRef: (name, ref) => {
   this[name] = ref;
  },
  //主动获取 获取绑定的组件
  getChildrenRef: name => {
   return this[name];
  },
  // 获取根组件
  getRef: () => {
   return this;
  }
 }
}
// 使用`inject` 在子组件中注入数据
inject: {
 setChildrenRef: {
  default: () => {}
 },
 getParentRef: {
  from: "getRef",
  default: () => {}
 },
 getParentChildrenRef: {
  from: "getChildrenRef",
  default: () => {}
 }
}

//使用指令注册子组件
<ChildrenH v-ant-ref="c => setChildrenRef('childrenH', c)" />
//使用指令注册DOM元素
<h3 v-ant-ref="c => setChildrenRef('childrenE', c)">E 结点</h3>

//获取根组件实例 
this.getParentRef()
//获取指定名称组件实例
this.getParentChildrenRef("childrenH")
//这里输出的事DOM
this.getParentChildrenRef("childrenE")

"use strict";

Object.defineProperty(exports, "__esModule", {
 value: true
});
exports.default = {
 install: function install(Vue) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var directiveName = options.name || 'ref';
  console.log(arguments)
  Vue.directive(directiveName, {
   bind: function bind(el, binding, vnode) {
    //自定义指令传入值 是函数, 在这里执行 传入组件实例
    binding.value(vnode.componentInstance || el, vnode.key); //vnode.key 是使用插件时起的名称
   },
   update: function update(el, binding, vnode, oldVnode) {
    if (oldVnode.data && oldVnode.data.directives) {
     var oldBinding = oldVnode.data.directives.find(function (directive) {
      var name = directive.name;
      return name === directiveName;
     });
     if (oldBinding && oldBinding.value !== binding.value) {
      oldBinding && oldBinding.value(null, oldVnode.key);
      // 如果指令绑定的值有变化,则更新 组件实例
      binding.value(vnode.componentInstance || el, vnode.key);
      return;
     }
    }
    // Should not have this situation
    if (vnode.componentInstance !== oldVnode.componentInstance || vnode.elm !== oldVnode.elm) {
     binding.value(vnode.componentInstance || el, vnode.key);
    }
   },
   unbind: function unbind(el, binding, vnode) {
    binding.value(null, vnode.key);
   }
  });
 }
};

import Index from './components/index.vue'
import './index.pcss'

function install (Vue) {
 Vue.component('gys-index-list', Index)
}

if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue)
}