子组件接收父组件的传参。 父组件: <template> <Son :data="data"/> </template> <script
子组件接收父组件的传参。
父组件:
<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>
官网说明
总结
到此这篇关于vue3中defineProps传值使用ref响应式失效的文章就介绍到这了,更多相关vue3使用ref响应式失效内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue3中defineProps传值使用ref响应式失效详解
本文链接: https://www.lsjlt.com/news/142536.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0