vue組件通信之父組件主動獲取子組件數據和方法

ref 可以用來獲取到dom節點，如果在組件中應用，也可以用來獲取子組件的數據和方法。

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

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

<v-head ref="header"></v-head>   // v-head 為 head 組件在 home 組件中注冊的標簽名，ref='header' 相當於獲取到當前組件


<button @click='getHeadData()'>父組件主動獲取子組件定義的數據和方法</button>

getHeaderData() {                  // home 組件 methods 下定義的方法
   this.$refs.header.on_alert();   // on_alert() 是 head 組件中定義的一個方法
}

 

這樣，就可以在父組件中，主動獲取到子組件中的數據和方法。

當然，子組件也可以主動獲取父組件的數據和方法。

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