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

  • 049_末晨曦Vue技术_处理边界情况之使用$parent访问父级组件实例已关闭评论
  • 28 次浏览
  • A+
所属分类:Web前端
摘要

点击打开视频讲解更详细和 $root 类似,$parent property 可以用来从一个子组件访问父组件的实例。它提供了一种机会,可以在后期随时触达父级组件,以替代将数据以 prop 的方式传入子组件的方式。


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