13.子组件主动获取父组件的数据和方法

子组件主动获取父组件的数据和方法

1.父组件Home.vue

<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

<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>