049_末晨曦Vue技术_处理边界情况之使用$parent访问父级组件实例

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