vue3 父组件调用子组件的数据或者修改子组件的状态

在Vue 3中，父组件可以通过ref或者$refs来访问子组件的数据或修改子组件的状态。以下是一种常见的方法：

首先，在子组件中，使用`ref`来定义一个引用，并将需要共享的数据或状态放在`ref`中：

// ChildComponent.vue
<template>
  <div>
    <p>{{ childData }}</p>
    <button @click="updateChildData">Update Child Data</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const childData = ref('Initial child data');

    const updateChildData = () => {
      childData.value = 'Updated child data';
    };

    return {
      childData,
      updateChildData
    };
  }
};
</script>

然后，在父组件中，使用`ref`来引用子组件，并通过该引用访问子组件的数据或调用修改子组件状态的方法：

// ParentComponent.vue
<template>
  <div>
    <ChildComponent ref="childRef" />
    <p>{{ childRef.childData }}</p>
    <button @click="updateChildRefData">Update Child Ref Data</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childRef = ref(null);

    const updateChildRefData = () => {
      childRef.value.childData = 'Updated child ref data';
    };

    return {
      childRef,
      updateChildRefData
    };
  }
};
</script>

在上面的示例中，父组件使用`ref`来引用子组件，并通过`childRef.value.childData`来访问子组件的`childData`数据。在父组件中的模板中，可以直接使用`{{ childRef.childData }}`来显示子组件的数据。通过点击按钮`Update Child Ref Data`，调用父组件的方法`updateChildRefData`来修改子组件的状态。

这样，父组件就可以访问子组件的数据或者修改子组件的状态了。注意在Vue 3中，使用`ref`来引用子组件，需要使用`.value`来访问子组件实例的数据和方法。