子组件接收父组件的传参。
父组件：
<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>官网说明
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #Vue3 #defineProps传值使用 #ref #响应式失效 #子组件接收父组件的传参 #langquottsquot
