vue3实现父组件传递数据并调用子组件函数

在 Vue3 中，可以通过 ref 和 setup 来实现父组件传递数据并调用子组件函数。
首先，在子组件中定义一个 ref，用于存储父组件传递的数据：
<template>
<div>{{ data }}</div>
</template>

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

export default {
setup(props) {
const data = ref(props.data);

function doSomething() {
// 子组件的函数
}

return {
data,
doSomething
};
}
};
</script>
登录后复制
然后，在父组件中引用子组件，并通过 v-bind 将数据传递给子组件：
<template>
<div>
<ChildComponent :data="dataRef.value" />
<button @click="callChildFunction">调用子组件函数</button>
</div>
</template>

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

export default {
components: {
ChildComponent
},
setup() {
const dataRef = ref('父组件传递的数据');

function callChildFunction() {
// 调用子组件的函数
ChildComponent.value.doSomething();
}

return {
dataRef,
callChildFunction
};
}
};
</script>
登录后复制
在父组件中，可以通过 ChildComponent.value 来访问子组件中的 ref 对象，从而调用子组件的函数。