ref 可以用來(lái)獲取到dom節(jié)點(diǎn)，如果在組件中應(yīng)用，也可以用來(lái)獲取子組件的數(shù)據(jù)和方法。

比如，我定義了一個(gè)home組件，一個(gè)head組件，home組件中引用head組件。

此時(shí)，home組件是head組件的父級(jí)，我想在home（父組件）組件中，獲取head（子組件）組件中定義的數(shù)據(jù)和方法

<v-head ref="header"></v-head> // v-head 為 head 組件在 home 組件中注冊(cè)的標(biāo)簽名，ref='header' 相當(dāng)于獲取到當(dāng)前組件

<button @click='getHeadData()'>父組件主動(dòng)獲取子組件定義的數(shù)據(jù)和方法</button> getHeaderData() { // home 組件 methods 下定義的方法this.$refs.header.on_alert(); // on_alert() 是 head 組件中定義的一個(gè)方法 }

?

這樣，就可以在父組件中，主動(dòng)獲取到子組件中的數(shù)據(jù)和方法。

當(dāng)然，子組件也可以主動(dòng)獲取父組件的數(shù)據(jù)和方法。

this.$parent.run() // run 為 home 組件中定義的方法，在 head 組件中可以直接調(diào)用

?

轉(zhuǎn)載于:https://www.cnblogs.com/Sky-Ice/p/9289123.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的vue组件通信之父组件主动获取子组件数据和方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。