Bootstrap

vue3中defineProps传值失去响应

写小项目的时候,遇到了一个问题,异步请求出的数据,无法及时传值给子组件,一时竟想不明白为什么,经过查阅资料,发现,子组件在用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>

记录一下。

;