Vue元件跨層級獲取元件操作

阿新 • • 發佈：2020-07-28

this.$parent 訪問父例項

this.$children 當前例項的直接子元件。(不保證順序,不是響應式)

this.$parent.$parent.$refs.xxx 跨級訪問父元件

this.$children.$children.$refs.xxx 跨級訪問子元件

這種遞迴的方式程式碼繁瑣效能低效

ref

只能獲取當前元件上下文元件無法跨層級

ref 是字串被用來給元素或子元件註冊引用資訊。

引用資訊將會註冊在父元件的 $refs 物件上。

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

如果用在子元件上，引用就指向元件例項

<!-- 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>

注：

因為 ref 本身是作為渲染結果被建立的，在初始渲染的時候你不能訪問它們,它們還不存在

$refs 不是響應式的，因此你不應該試圖用它在模板中做資料繫結。

這僅作為一個用於直接操作子元件的“逃生艙”——你應該避免在模板或計算屬性中訪問 $refs。

當 ref 和 v-for 一起使用的時候，你得到的引用將會是一個包含了對應資料來源的這些子元件的陣列。

如何優雅的獲取跨層級例項 ?

1、npm install vue-ref || yarn add vue-ref 安裝vue-ref外掛

2、匯入import ref from "vue-ref"

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

外掛使用方法

//使用`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")

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) {
    //自定義指令傳入值 是函式,在這裡執行 傳入元件例項
    binding.value(vnode.componentInstance || el,vnode.key); //vnode.key 是使用外掛時起的名稱
   },update: function update(el,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,vnode) {
    binding.value(null,vnode.key);
   }
  });
 }
};

補充知識：vue專案中z-index不起作用（將vue例項掛在到window上面）

問題描述：由於原有專案（傳統專案）中嵌入新的vue元件，dialog彈出框的z-index：999999；任然不起作用；

解決辦法：將vue例項掛載到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檔案）

Vue元件跨層級獲取元件操作