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