首页 > 技术文章 > vue组件通信之父组件主动获取子组件数据和方法

Sky-Ice 2018-07-10 15:04 原文

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

 

推荐阅读