Vue使用Ref跨層級獲取組件實例

2021 年 1 月 25 日
筆記
VUE

Vue使用Ref跨層級獲取組件實例

Vue使用Ref跨層級獲取組件實例

示例介紹

在開發過程中，我們難免會使用到跨層級的ref實例獲取，大部分情況下，我們都可以通過組件自身的parent或者children去找到需要的實例。但是當層級不明顯或者太深的時候，用此方法難免過於臃腫和低效率。

如下圖所示，我們通過組件E去獲取組件D的組件實例。

文檔目錄結構

分別有A、B、C、D、E和index六個組件，並按照上圖的組件順序，分別插入到各自的頁面中。

頁面樣式如下：

安裝vue-ref

下載vue-ref

npm install vue-ref –save

全局註冊

import ref from 'vue-ref'
Vue.use(ref)

使用方法

<!-- vm.dom will be the DOM node -->
<p v-ref="c => this.dom = c">hello</p>

<!-- vm.child will be the child component instance -->
<child-component v-ref="c => this.child = c"></child-component>

<span v-for="n in 10" :key="n" v-ref="(c, key) => {...}">{{ n }} </span>

根組件自定義方法[使用provide和inject]

我們index頁面中，提供了三個方法：分別用來：

設置子組件的實例，setChildrenRef
獲取自組件實例， getChildrenRef
獲取當前節點實例， getRef

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