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>