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