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 组件中可以直接调用