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>