Vue組件跨層級(jí)獲取組件操作

更新時(shí)間：2020年07月27日 15:00:21 作者：請(qǐng)叫我蘿卜斯基先生

這篇文章主要介紹了Vue組件跨層級(jí)獲取組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

this.$parent 訪問(wèn)父實(shí)例

this.$children 當(dāng)前實(shí)例的直接子組件。(不保證順序,不是響應(yīng)式)

this.$parent.$parent.$refs.xxx 跨級(jí)訪問(wèn)父組件

this.$children.$children.$refs.xxx 跨級(jí)訪問(wèn)子組件

這種遞歸的方式代碼繁瑣性能低效

ref

只能獲取當(dāng)前組件上下文組件無(wú)法跨層級(jí)

ref 是字符串被用來(lái)給元素或子組件注冊(cè)引用信息。

引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；

如果用在子組件上，引用就指向組件實(shí)例

<!-- vm.$refs.p/this.$refs.p 獲取DOM node -->
<p ref="p">hello</p>
<!-- vm.$refs.child/this.$refs.child 獲取組件實(shí)例 -->
<child-component ref="child"></child-component>

注：

因?yàn)?ref 本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時(shí)候你不能訪問(wèn)它們,它們還不存在

$refs 不是響應(yīng)式的，因此你不應(yīng)該試圖用它在模板中做數(shù)據(jù)綁定。

這僅作為一個(gè)用于直接操作子組件的“逃生艙”——你應(yīng)該避免在模板或計(jì)算屬性中訪問(wèn) $refs。

當(dāng) ref 和 v-for 一起使用的時(shí)候，你得到的引用將會(huì)是一個(gè)包含了對(duì)應(yīng)數(shù)據(jù)源的這些子組件的數(shù)組。

如何優(yōu)雅的獲取跨層級(jí)實(shí)例 ?

1、npm install vue-ref || yarn add vue-ref 安裝vue-ref插件

2、導(dǎo)入import ref from "vue-ref"

3、使用插件Vue.use(ref, { name: "ant-ref" });name是給插件起名

插件使用方法

//使用`provide` 在根組件提供數(shù)據(jù) 
provide() {
 return {
  //主動(dòng)通知 將組件實(shí)例綁定在根組件上
  setChildrenRef: (name, ref) => {
   this[name] = ref;
  },
  //主動(dòng)獲取 獲取綁定的組件
  getChildrenRef: name => {
   return this[name];
  },
  // 獲取根組件
  getRef: () => {
   return this;
  }
 }
}
// 使用`inject` 在子組件中注入數(shù)據(jù)
inject: {
 setChildrenRef: {
  default: () => {}
 },
 getParentRef: {
  from: "getRef",
  default: () => {}
 },
 getParentChildrenRef: {
  from: "getChildrenRef",
  default: () => {}
 }
}

//使用指令注冊(cè)子組件
<ChildrenH v-ant-ref="c => setChildrenRef('childrenH', c)" />
//使用指令注冊(cè)DOM元素
<h3 v-ant-ref="c => setChildrenRef('childrenE', c)">E 結(jié)點(diǎn)</h3>

//獲取根組件實(shí)例 
this.getParentRef()
//獲取指定名稱(chēng)組件實(shí)例
this.getParentChildrenRef("childrenH")
//這里輸出的事DOM
this.getParentChildrenRef("childrenE")

vue-ref插件源碼

"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) {
    //自定義指令傳入值 是函數(shù), 在這里執(zhí)行 傳入組件實(shí)例
    binding.value(vnode.componentInstance || el, vnode.key); //vnode.key 是使用插件時(shí)起的名稱(chēng)
   },
   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);
      // 如果指令綁定的值有變化,則更新 組件實(shí)例
      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);
   }
  });
 }
};

補(bǔ)充知識(shí)：vue項(xiàng)目中z-index不起作用（將vue實(shí)例掛在到window上面）

問(wèn)題描述：由于原有項(xiàng)目（傳統(tǒng)項(xiàng)目）中嵌入新的vue組件，dialog彈出框的z-index：999999；任然不起作用；

解決辦法：將vue實(shí)例掛載到window

解決代碼如下：

入口文件index.js中

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)
}

在父組件中正確引入壓縮后的css文件+js文件（這里截圖的父組件是html文件）