這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)怎么在Vue中利用Ref跨層級獲取組件，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
我們擁有10余年網(wǎng)頁設(shè)計和網(wǎng)站建設(shè)經(jīng)驗，從網(wǎng)站策劃到網(wǎng)站制作，我們的網(wǎng)頁設(shè)計師為您提供的解決方案。為企業(yè)提供
成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、微信開發(fā)、微信小程序開發(fā)、
移動網(wǎng)站建設(shè)、
H5網(wǎng)站設(shè)計、等業(yè)務(wù)。無論您有什么樣的網(wǎng)站設(shè)計或者設(shè)計方案要求，我們都將富于創(chuàng)造性的提供專業(yè)設(shè)計服務(wù)并滿足您的需求。
文檔目錄結(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)
使用方法
this.dom = c">hello
this.child = c">
{...}">{{ n }}
根組件自定義方法[使用provide和inject]
我們index頁面中，提供了三個方法：分別用來：
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é)果
上述就是小編為大家分享的怎么在Vue中利用Ref跨層級獲取組件了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
本文標(biāo)題：怎么在Vue中利用Ref跨層級獲取組件-創(chuàng)新互聯(lián)
本文來源：
http://weahome.cn/article/dpdsgj.html
重慶分公司
重慶分公司
