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

srccomponentsHelloWorld.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>