vue3 defineProps传值使用 ref 响应式失效

最新推荐文章于 2024-09-25 10:52:55 发布

m0_67391521

最新推荐文章于 2024-09-25 10:52:55 发布

阅读量3.6k

点赞数

分类专栏：前端 html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_67391521/article/details/123433329

版权

前端同时被 2 个专栏收录

21 篇文章 2 订阅

订阅专栏

html

21 篇文章 0 订阅

订阅专栏

本文探讨了在Vue.js中，子组件如何正确接收并响应父组件传递的参数。通过示例代码展示了ref和toRef在父子组件通信中的不同行为，解释了为何使用toRef才能实现数据的双向绑定。最后提供了修正后的代码，以确保子组件能实时反映父组件数据的变化。

摘要由CSDN通过智能技术生成

子组件接收父组件的传参。

父组件：

<template>
	<Son :data="data"/>
</template>
<script setup>
import { ref } from "vue";
let data = ref('hello')
setTimeout(() => {
	data.value = 'how are you doing'
}, 2000)

</script>

子组件：

<template>
	<div>{{ msg }}</div>
</template>
<script setup>
import { ref } from "vue";
// 接受来自父组件的传参
const props = defineProps({
  data: String,
});
const msg = ref(props.data);

</script>

此时父组件改变 data 的值，子组件 msg 无法响应 data 的变化。
因为 ref 是对传入数据的拷贝，原始值 data 的改变并不影响 msg
但 toRef 是对传入数据的引用，原始值 data 改变会影响 msg

正确做法：

<template>
	<div>{{ msg }}</div>
	<div>{{ data }}</div>
</template>
<script setup>
import { ref, toRefs, toRef } from "vue";
// 接受来自父组件的传参
const props = defineProps({
  data: String,
});
// 方法1：
const msg = toRef(props, 'data');
// 方法2：
const { data } = toRefs(props);

</script>

官网说明
在这里插入图片描述