vue3中defineProps傳值使用ref響應式失效詳解
更新時間：2022年03月15日 11:10:33 作者：可樂姜汁
這篇文章主要給大家介紹了關于vue3中defineProps傳值使用ref響應式失效的相關資料,文章通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
子組件接收父組件的傳參。
父組件：
<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 是對傳入數(shù)據(jù)的拷貝，原始值 data 的改變并不影響 msg
但 toRef 是對傳入數(shù)據(jù)的引用，原始值 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>
官網(wǎng)說明
總結
到此這篇關于vue3中defineProps傳值使用ref響應式失效的文章就介紹到這了,更多相關vue3使用ref響應式失效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Echarts實現(xiàn)一張圖現(xiàn)切換不同的X軸(實例代碼)
這篇文章主要介紹了Echarts 如何實現(xiàn)一張圖現(xiàn)切換不同的X軸,通過動圖給大家展示效果，實例代碼相結合給大家介紹的非常詳細，需要的朋友可以參考下2021-11-11
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要介紹了vue踩坑記錄:屬性報undefined錯誤問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue父組件如何獲取子組件的值,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要介紹了vue-router實現(xiàn)原理及兩種模式分析,給大家介紹了vue-router hash模式與history模式不同模式下處理邏輯，需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue-router路由懶加載及實現(xiàn)方式,路由懶加載的主要作用是將 路由對應的組件打包成一個個的js代碼塊，只有在這個路由被訪問到的時候，才會加載對應組件的代碼塊，需要的朋友可以參考下2022-12-12
vue+iview?Table表格多選切換分頁保持勾選狀態(tài)
這篇文章主要為大家詳細介紹了vue+iview?Table表格多選切換分頁保持勾選狀態(tài)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
vue-admin-template配置快捷導航的代碼（標簽導航欄）
這篇文章主要介紹了vue-admin-template配置快捷導航的方法（標簽導航欄），本文通過實例代碼給大家介紹的非常詳細，對大家學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09
今天小編就為大家分享一篇解決vue+element 鍵盤回車事件導致頁面刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)分頁組件的具體代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12