在Vue 3中，可以使用ref来获取子组件的引用，并通过该引用调用子组件的方法或访问其数据。以下是一个简单的例子：
- 子组件 (
ChildComponent.vue):
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello from Child Component'
};
},
methods: {
getMessage() {
return this.message;
}
}
};
</script>- 父组件 (
ParentComponent.vue):
<template>
<div>
<ChildComponent ref="childComponentRef" />
<button @click="accessChildComponentData">Access Child Component Data</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';
export default {
components: {
ChildComponent
},
setup() {
const childComponentRef = ref(null);
const accessChildComponentData = () => {
if (childComponentRef.value) {
console.log(childComponentRef.value.getMessage()); // 访问子组件的方法
console.log(childComponentRef.value.message); // 访问子组件的数据
}
};
return {
childComponentRef,
accessChildComponentData
};
}
};
</script>在这个例子中，父组件通过ref="childComponentRef"属性为子组件设置了一个引用名称。在父组件的setup函数中，使用ref函数创建了一个响应式引用childComponentRef。通过childComponentRef.value可以访问子组件的实例，并调用子组件的方法或访问数据。