父组件主动获取子组件的数据和方法
1.父组件Home.vue
代码语言：javascript
复制<template>
<div>
<h2>{{msg}}</h2>
<!-- 1.调用子组件的时候调用一个ref -->
<!-- 2.在父组件中通过this.$refs.header.数据 this.$refs.header.方法 调用子组件的数据和方法 -->
<!-- 注意，第一步是ref，第二步是refs -->
<v-header ref="header"></v-header>
<button @click="getData()">获取子组件数据</button>
<button @click="getFunction()">获取子组件的方法</button>
</div>
</template>
<script>
import Header from "./Header.vue";
export default {
name: 'home',
data () {
return {
msg:'首页组件',
}
},
methods:{
getData(){
alert(this.$refs.header.msg)
},
getFunction(){
this.$refs.header.run()
}
},
components:{
'v-header':Header
}
}
</script>
<style lang="scss" scoped>
h2{
color: red;
}
</style>
2.子组件Header.vue
代码语言：javascript
复制<template>
<div>
<h2>{{msg}}</h2>
</div>
</template>
<script>
export default {
name: 'Header',
data () {
return {
msg:'头部组件',
title:'子组件'
}
},
methods:{
run(){
alert('子组件run方法')
}
}
}
</script>
<style lang="scss" scoped>
h2{
color: green;
}
</style>
