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来访问子组件实例的数据和方法。