子组件可以通过 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>

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注