使用$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>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)