子组件可以通过 this.$parent 访问其父组件的属性和方法,但是这种方式会使代码更加紧密耦合。子组件还可以通过 this.$children 访问其子组件的属性和方法,但是这种方式也存在一些限制。
父组件:htmlCopy
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage: 'Hello from parent!',
};
},
};
</script>
子组件:htmlCopy
<template>
<div>
{{ $parent.parentMessage }}
</div>
</template>
<script>
export default {
};
</script>