使用$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>