溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關怎么在Vue中利用Ref跨層級獲取組件，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
分別有A、B、C、D、E和index六個組件，并按照上圖的組件順序，分別插入到各自的頁面中。
頁面樣式如下：
下載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>我們index頁面中，提供了三個方法：分別用來：
設置子組件的實例，setChildrenRef
獲取自組件實例， getChildrenRef
獲取當前節點實例， getRef
provide() {
return {
setChildrenRef: (name, ref) => {
this[name] = ref
},
getChildrenRef: name => {
return this[name]
},
getRef: () => {
return this
}
}
},組件A頁面：
通過注入的方法，獲取setChildrenRef方法，并通過上述指令，將組件D緩存起來
組件B頁面：
組件C頁面：
組件D頁面：
組件E頁面：
在這個頁面中，我們不僅注入了兩個方法，還設置了切換D組件顏色的方法，用來測試我們是否真的跨層級獲取到了組件D的實例。
上述就是小編為大家分享的怎么在Vue中利用Ref跨層級獲取組件了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
