子组件主动获取父组件的数据和方法
1.父组件Home.vue
代码语言：javascript
复制<template>
<div>
<h2>{{msg}}</h2>
<v-header></v-header>
</div>
</template>
<script>
import Header from "./Header.vue";
export default {
name: 'home',
data () {
return {
msg:'首页组件',
title:'父组件'
}
},
methods:{
run(){
alert('父组件方法')
}
},
components:{
'v-header':Header
}
}
</script>
<style lang="scss" scoped>
h2{
color: red;
}
</style>
2.子组件Header.vue
代码语言：javascript
复制<template>
<div>
<h2>{{msg}}</h2>
<button @click="getData()">获取父组件数据</button>
<button @click="getFunction()">获取父组件的方法</button>
</div>
</template>
<script>
export default {
name: 'Header',
data () {
return {
msg:'头部组件',
title:'子组件'
}
},
methods:{
getData(){
console.log(this.$parent.title)
},
getFunction(){
this.$parent.run()
}
}
}
</script>
<style lang="scss" scoped>
h2{
color: green;
}
</style>
