Vue使用Ref跨層級(jí)獲取組件實(shí)例示例介紹

在開(kāi)發(fā)過(guò)程中，我們難免會(huì)使用到跨層級(jí)的ref實(shí)例獲取，大部分情況下，我們都可以通過(guò)組件自身的parent或者children去找到需要的實(shí)例。但是當(dāng)層級(jí)不明顯或者太深的時(shí)候，用此方法難免過(guò)于臃腫和低效率。

如下圖所示，我們通過(guò)組件E去獲取組件D的組件實(shí)例。

文檔目錄結(jié)構(gòu)

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

頁(yè)面樣式如下：

安裝vue-ref

下載vue-ref

npm install vue-ref --save

全局注冊(cè)

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頁(yè)面中，提供了三個(gè)方法：分別用來(lái)：

設(shè)置子組件的實(shí)例，setChildrenRef 獲取自組件實(shí)例， getChildrenRef 獲取當(dāng)前節(jié)點(diǎn)實(shí)例， getRef

provide() { return { setChildrenRef: (name, ref) => { this[name] = ref }, getChildrenRef: name => { return this[name] }, getRef: () => { return this } } },分別說(shuō)明各個(gè)頁(yè)面

組件A頁(yè)面：

通過(guò)注入的方法，獲取setChildrenRef方法，并通過(guò)上述指令，將組件D緩存起來(lái)

組件B頁(yè)面：

組件C頁(yè)面：

組件D頁(yè)面：

組件E頁(yè)面：

在這個(gè)頁(yè)面中，我們不僅注入了兩個(gè)方法，還設(shè)置了切換D組件顏色的方法，用來(lái)測(cè)試我們是否真的跨層級(jí)獲取到了組件D的實(shí)例。

結(jié)果

可以看到，三個(gè)parent的實(shí)例是一樣的，在組件E中也成功修改了組件D的文字樣式。good！

以上就是Vue使用Ref跨層級(jí)獲取組件的步驟的詳細(xì)內(nèi)容，更多關(guān)于vue 使用Ref獲取組件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！