Vue3使用setup監(jiān)聽(tīng)props實(shí)現(xiàn)方法詳解
背景描述
子組件展示父組件傳來(lái)的參數(shù)，展示的信息隨著父組件上tab的切換動(dòng)態(tài)更新。
一開(kāi)始的想法是單獨(dú)監(jiān)聽(tīng)這個(gè)傳遞的參數(shù)，但看了VUE3的文檔之后，似乎對(duì)參數(shù)的監(jiān)聽(tīng)必須精確到屬性。例如參數(shù)為
{
name: 'Doctor',
gender: 'Timelord'
}需要在子組件的watch中寫明監(jiān)聽(tīng)的是name還是gender。
該參數(shù)中有很多可能會(huì)改變的屬性，一一監(jiān)聽(tīng)過(guò)于麻煩。所以改變思路，使用監(jiān)聽(tīng)props來(lái)獲取所有所有傳參。
實(shí)現(xiàn)方法
在父組件中，用于傳遞給子組件的參數(shù)必須為響應(yīng)式(eg. reactive)，否則子組件在監(jiān)聽(tīng)時(shí)不會(huì)監(jiān)測(cè)到變換，watch永遠(yuǎn)不會(huì)生效
immediate是立即開(kāi)始監(jiān)聽(tīng)，在頁(yè)面首次渲染時(shí)可能為顯示為undefined，如果watch的變化需要手動(dòng)觸發(fā)，不需要開(kāi)啟
deep默認(rèn)開(kāi)啟，可以忽略（參數(shù)為reactive，會(huì)默認(rèn)開(kāi)啟deep，如果是ref，則不會(huì)默認(rèn)開(kāi)啟deep）
// 父組件
<script>
export default {
setup() {
let traveller = reactive({
name: 'Doctor',
gender: 'Timelord'
})
}
}
</script>// 子組件
<script>
export default {
props: {
traveller: {
type: Object
}
}
setup(props) {
watch(
props,
(old, newProps) => {
console.log('=======', newProps); //這里看到新值
},
// {
// immediate: true,
// deep: true
// }
)
}
}
</script>以上就是Vue3使用setup監(jiān)聽(tīng)props實(shí)現(xiàn)方法詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3 setup監(jiān)聽(tīng)props的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue-router后臺(tái)鑒權(quán)流程實(shí)現(xiàn)
本文主要介紹了vue-router后臺(tái)鑒權(quán)流程實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
在Vue3中,defineProps()函數(shù)是定義和接收組件屬性的主要方式,通過(guò)簡(jiǎn)單定義或?qū)ο蠖x,開(kāi)發(fā)者可以靈活地接收并處理組件上的屬性值,簡(jiǎn)單定義方式通過(guò)數(shù)組傳遞屬性名,而對(duì)象定義則可以約束屬性的數(shù)據(jù)類型、默認(rèn)值及是否必須傳遞等2024-09-09
這篇文章主要介紹了vue項(xiàng)目中$t()的意思是什么，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue單頁(yè)面實(shí)現(xiàn)當(dāng)前頁(yè)面刷新或跳轉(zhuǎn)時(shí)提示保存
這篇文章主要介紹了vue單頁(yè)面實(shí)現(xiàn)當(dāng)前頁(yè)面刷新或跳轉(zhuǎn)時(shí)提示保存，在當(dāng)前頁(yè)面刷新或跳轉(zhuǎn)時(shí)提示保存并可取消刷新，以防止填寫的表單內(nèi)容丟失，感興趣的小伙伴們可以參考一下2018-11-11
在vue項(xiàng)目創(chuàng)建的后初始化首次使用stylus安裝方法分享
下面小編就為大家分享一篇在vue項(xiàng)目創(chuàng)建的后初始化首次使用stylus安裝方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue前后端分離如何解決每次請(qǐng)求session都會(huì)變的問(wèn)題
這篇文章主要介紹了vue前后端分離如何解決每次請(qǐng)求session都會(huì)變的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要給大家介紹了關(guān)于vue中Axios的封裝與API接口的管理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
這篇文章主要介紹了Vue.js單向綁定和雙向綁定,結(jié)合實(shí)例形式分析了vue.js單向綁定與雙向綁定相關(guān)原理、實(shí)現(xiàn)方法及操作技巧,需要的朋友可以參考下2018-08-08
Axios是一個(gè)功能強(qiáng)大、易用性高的HTTP庫(kù),適用于大多數(shù)的前端項(xiàng)目,它提供了豐富的功能和靈活的配置選項(xiàng),可以滿足不同項(xiàng)目的需求,這篇文章主要介紹了vue中使用axios的作用,需要的朋友可以參考下2023-08-08
vue.js+Element實(shí)現(xiàn)表格里的增刪改查
本篇文章主要介紹了vue.js+Element實(shí)現(xiàn)增刪改查，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01