Vue使用Ref跨層級獲取組件的步驟
更新時間：2021年01月25日 14:16:13 作者：菜小牛
這篇文章主要介紹了Vue使用Ref跨層級獲取組件的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
Vue使用Ref跨層級獲取組件實例
示例介紹
在開發(fā)過程中，我們難免會使用到跨層級的ref實例獲取，大部分情況下，我們都可以通過組件自身的parent或者children去找到需要的實例。但是當層級不明顯或者太深的時候，用此方法難免過于臃腫和低效率。
如下圖所示，我們通過組件E去獲取組件D的組件實例。
文檔目錄結(jié)構(gòu)
分別有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頁面中，提供了三個方法：分別用來：
- 設(shè)置子組件的實例，setChildrenRef
- 獲取自組件實例， getChildrenRef
- 獲取當前節(jié)點實例， getRef
provide() {
return {
setChildrenRef: (name, ref) => {
this[name] = ref
},
getChildrenRef: name => {
return this[name]
},
getRef: () => {
return this
}
}
},
分別說明各個頁面
組件A頁面：
通過注入的方法，獲取setChildrenRef方法，并通過上述指令，將組件D緩存起來
組件B頁面：
組件C頁面：
組件D頁面：
組件E頁面：
在這個頁面中，我們不僅注入了兩個方法，還設(shè)置了切換D組件顏色的方法，用來測試我們是否真的跨層級獲取到了組件D的實例。
結(jié)果
可以看到，三個parent的實例是一樣的，在組件E中也成功修改了組件D的文字樣式。good！
以上就是Vue使用Ref跨層級獲取組件的步驟的詳細內(nèi)容，更多關(guān)于vue 使用Ref獲取組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構(gòu)建單頁面應用變得易如反掌。路由實際上就是可以理解為指向，就是我在頁面上點擊一個按鈕需要跳轉(zhuǎn)到對應的頁面，這就是路由跳轉(zhuǎn)2023-01-01
本篇文章主要介紹了vue基于Vue2.0和高德地圖的地圖組件實例，非常具有實用價值，需要的朋友可以參考下2017-04-04
uni-app是一款基于Vue.js的跨平臺開發(fā)框架，它借助了 Vue.js 的語法和組件化開發(fā)思想，本文將詳細介紹 uni-app 的全局配置、靜態(tài)資源管理、路由管理以及數(shù)據(jù)通信和狀態(tài)管理的進階使用技巧,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了vue使用echarts圖表的詳細方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
vscode使用Eslint+Prettier格式化代碼的詳細操作
這篇文章主要介紹了vscode使用Eslint+Prettier格式化代碼，本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue.js 輸入框輸入值自動過濾特殊字符替換中問標點操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本文將詳細介紹Vue表單控件數(shù)據(jù)綁定方法,需要的朋友可以參考下2020-02-02
對于vue下的雙向綁定功能，個人理解為在處理邏輯的過程中緩存了大量的node對象，node對象可以是html標簽、文本內(nèi)容。既然選擇了緩存這些對象，那么在用的過程中哪里需要改變就把node拿出來，進行標簽屬性的變更或者文本內(nèi)容的修改。本文主要講了如何實現(xiàn)雙向綁定2021-06-06
vue-cli中devServer.proxy相關(guān)配置項的使用
這篇文章主要介紹了vue-cli中devServer.proxy相關(guān)配置項的使用詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了淺談Vue項目骨架屏注入實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08