Vue使用Ref跨層級獲取組件的步驟

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

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

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

示例介紹

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

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

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

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

頁面樣式如下：

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

設(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
   }
  }
 },

分別說明各個(gè)頁面

組件A頁面：

通過注入的方法，獲取setChildrenRef方法，并通過上述指令，將組件D緩存起來

組件B頁面：

組件C頁面：

組件D頁面：

組件E頁面：

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

結(jié)果

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

以上就是Vue使用Ref跨層級獲取組件的步驟的詳細(xì)內(nèi)容，更多關(guān)于vue 使用Ref獲取組件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

快速掌握Vue Router使用方法
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。路由實(shí)際上就是可以理解為指向，就是我在頁面上點(diǎn)擊一個(gè)按鈕需要跳轉(zhuǎn)到對應(yīng)的頁面，這就是路由跳轉(zhuǎn)
2023-01-01
vue基于Vue2.0和高德地圖的地圖組件實(shí)例
本篇文章主要介紹了vue基于Vue2.0和高德地圖的地圖組件實(shí)例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-04-04
uni-app進(jìn)階使用技巧分享
uni-app是一款基于Vue.js的跨平臺開發(fā)框架，它借助了 Vue.js 的語法和組件化開發(fā)思想，本文將詳細(xì)介紹 uni-app 的全局配置、靜態(tài)資源管理、路由管理以及數(shù)據(jù)通信和狀態(tài)管理的進(jìn)階使用技巧,需要的朋友可以參考下
2023-06-06
vue使用echarts圖表的詳細(xì)方法
這篇文章主要為大家詳細(xì)介紹了vue使用echarts圖表的詳細(xì)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
vscode使用Eslint+Prettier格式化代碼的詳細(xì)操作
這篇文章主要介紹了vscode使用Eslint+Prettier格式化代碼，本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-08-08
vue.js 輸入框輸入值自動(dòng)過濾特殊字符替換中問標(biāo)點(diǎn)操作
這篇文章主要介紹了vue.js 輸入框輸入值自動(dòng)過濾特殊字符替換中問標(biāo)點(diǎn)操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue表單控件數(shù)據(jù)綁定方法詳解
本文將詳細(xì)介紹Vue表單控件數(shù)據(jù)綁定方法,需要的朋友可以參考下
2020-02-02
純JS如何實(shí)現(xiàn)vue.js下的雙向綁定功能
對于vue下的雙向綁定功能，個(gè)人理解為在處理邏輯的過程中緩存了大量的node對象，node對象可以是html標(biāo)簽、文本內(nèi)容。既然選擇了緩存這些對象，那么在用的過程中哪里需要改變就把node拿出來，進(jìn)行標(biāo)簽屬性的變更或者文本內(nèi)容的修改。本文主要講了如何實(shí)現(xiàn)雙向綁定
2021-06-06
vue-cli中devServer.proxy相關(guān)配置項(xiàng)的使用
這篇文章主要介紹了vue-cli中devServer.proxy相關(guān)配置項(xiàng)的使用詳解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
淺談Vue項(xiàng)目骨架屏注入實(shí)踐
這篇文章主要介紹了淺談Vue項(xiàng)目骨架屏注入實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08