写小项目的时候,遇到了一个问题,异步请求出的数据,无法及时传值给子组件,一时竟想不明白为什么,经过查阅资料,发现,子组件在用defineProps接受到值以后,必须用toRefs来解构一下,才可以。
父组件
//父组件
<template>
<Son :data="data"/>
</template>
<script setup>
import { ref } from "vue";
let data = ref('你哈')
</script>
子组件:
<template>
<div>{{ data }}</div>
</template>
<script setup>
import { toRefs } from "vue";
const props = defineProps({
data: String,
});
//此处必须用toRefs,否则将失去响应式
const { data } = toRefs(props);
</script>
记录一下。