快捷導(dǎo)航

Vue使用Ref跨層級(jí)獲取組件的步驟

更新時(shí)間：2021年01月25日 14:16:13 作者：菜小牛

這篇文章主要介紹了Vue使用Ref跨層級(jí)獲取組件的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下

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)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

最后說(shuō)說(shuō)Vue2 SSR 的 Cookies 問(wèn)題
這篇文章主要介紹了最后說(shuō)說(shuō)Vue2 SSR 的 Cookies 問(wèn)題,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
解決報(bào)錯(cuò)ValidationError: Progress Plugin Invalid&
這篇文章主要介紹了解決報(bào)錯(cuò)ValidationError: Progress Plugin Invalid Options問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue實(shí)現(xiàn)進(jìn)入某個(gè)頁(yè)面后替換地址欄路徑的操作方法
vue頁(yè)面在實(shí)際開(kāi)發(fā)中,經(jīng)常會(huì)遇到改變url參數(shù),重新加載頁(yè)面數(shù)據(jù)的需求,但是只改變頁(yè)面url并不會(huì)觸發(fā)組件的生命周期,這就需要用其他方法來(lái)實(shí)現(xiàn)了,本文重點(diǎn)介紹vue實(shí)現(xiàn)進(jìn)入某個(gè)頁(yè)面后替換地址欄路徑的操作方法,感興趣的朋友跟隨小編一起看看吧
2024-04-04
深入了解Vue.js中的Vuex狀態(tài)管理模式
Vuex是Vue.js的官方狀態(tài)管理模式，它為Vue.js應(yīng)用程序提供了一個(gè)集中式的狀態(tài)管理解決方案，Vuex可以幫助我們管理應(yīng)用程序中所有組件的狀態(tài)，使得狀態(tài)管理變得更加簡(jiǎn)單和可靠，需要詳細(xì)了解可以參考下文
2023-05-05
Vue3解決ElementPlus自動(dòng)導(dǎo)入時(shí)ElMessage無(wú)法顯示的問(wèn)題
這篇文章主要介紹了Vue3解決ElementPlus自動(dòng)導(dǎo)入時(shí)ElMessage無(wú)法顯示的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue項(xiàng)目打包為exe可安裝程序操作步驟
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包為exe可安裝程序操作步驟的相關(guān)資料,Vue是一種流行的JavaScript框架,用于構(gòu)建單頁(yè)面應(yīng)用程序(SPA),需要的朋友可以參考下
2023-12-12
ant?design?vue的table取消自帶分頁(yè)問(wèn)題
這篇文章主要介紹了ant?design?vue的table取消自帶分頁(yè)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
利用Vue+ElementUi實(shí)現(xiàn)評(píng)論功能
這篇文章主要介紹了如何利用Vue+ElementUi實(shí)現(xiàn)評(píng)論功能,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-04-04
Vue3從0搭建Monorepo項(xiàng)目組件庫(kù)
這篇文章主要為大家介紹了Vue3從0搭建Monorepo項(xiàng)目組件庫(kù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
基于Vue渲染與插件的加載順序的問(wèn)題詳解
下面小編就為大家分享一篇基于Vue渲染與插件的加載順序的問(wèn)題詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03