访问子组件的状态

// 父组件
<template>
  <div>
    <child-component :data="parentData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentData: 'Hello from parent',
    };
  },
  components: {
    ChildComponent,
  },
};
</script>

// 子组件 ChildComponent.vue
<template>
  <div>
    <p>{{ data }}</p>
  </div>
</template>

<script>
export default {
  props: ['data'],
};
</script>

// 父组件
<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="getChildData">Get Child Data</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    getChildData() {
      const childData = this.$refs.child.data;
      console.log(childData);
    },
  },
};
</script>

// 子组件 ChildComponent.vue
<template>
  <div>
    <p>{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: 'Hello from child',
    };
  },
};
</script>