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