使用$parent訪問父級組件實例

點擊打開視頻講解更詳細

和 $root 類似，$parent property 可以用來從一個子組件訪問父組件的實例。它提供了一種機會，可以在後期隨時觸達父級組件，以替代將數據以 prop 的方式傳入子組件的方式。

註意：在絕大多數情況下，觸達父級組件會使得你的應用更難調試和理解，尤其是當你變更了父級組件的數據的時候。當我們稍後回看那個組件的時候，很難找出那個變更是從哪裡發起的。

<template>
  <div id="app">
    <HelloWorld></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return {
      name:'父組件數據'
    } 
  },
  mounted(){
    
  },
  components:{
    HelloWorld
  },
  computed:{
    
  },
  methods:{
    changeName(){
      console.log('changeName')
    }
  }
}
</script>

<style scoped>
 
</style>

src\components\HelloWorld.vue

<template>
  <div class="hello">
    <!-- 使用父組件中data數據 -->
      {{ $parent.name }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: [],
  data(){
    return{
      
    }
  },
  mounted(){
    //調用父組件中方法
    this.$parent.changeName()
  },
  methods:{
    
  }
}
</script>

<style scoped>

</style>