Vue3使用setup監(jiān)聽props實(shí)現(xiàn)方法詳解
背景描述
子組件展示父組件傳來的參數(shù)，展示的信息隨著父組件上tab的切換動態(tài)更新。
一開始的想法是單獨(dú)監(jiān)聽這個傳遞的參數(shù)，但看了VUE3的文檔之后，似乎對參數(shù)的監(jiān)聽必須精確到屬性。例如參數(shù)為
{
name: 'Doctor',
gender: 'Timelord'
}需要在子組件的watch中寫明監(jiān)聽的是name還是gender。
該參數(shù)中有很多可能會改變的屬性，一一監(jiān)聽過于麻煩。所以改變思路，使用監(jiān)聽props來獲取所有所有傳參。
實(shí)現(xiàn)方法
在父組件中，用于傳遞給子組件的參數(shù)必須為響應(yīng)式(eg. reactive)，否則子組件在監(jiān)聽時不會監(jiān)測到變換，watch永遠(yuǎn)不會生效
immediate是立即開始監(jiān)聽，在頁面首次渲染時可能為顯示為undefined，如果watch的變化需要手動觸發(fā)，不需要開啟
deep默認(rèn)開啟，可以忽略（參數(shù)為reactive，會默認(rèn)開啟deep，如果是ref，則不會默認(rèn)開啟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)聽props實(shí)現(xiàn)方法詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3 setup監(jiān)聽props的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
定時器如果不及時合理地清除，會造成業(yè)務(wù)邏輯混亂甚至應(yīng)用卡死的情況，這個時就需要清除定時器，本文就介紹了Vue如何優(yōu)雅的清除定時器，感興趣的可以了解一下2021-07-07
vue3標(biāo)簽中的ref屬性詳解及如何使用$refs獲取元素
這篇文章主要給大家介紹了關(guān)于vue3標(biāo)簽中的ref屬性詳解及如何使用$refs獲取元素的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-11-11
這篇文章主要為大家詳細(xì)介紹了vue滾動軸插件better-scroll的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
在vue3中父組件訪問子組件中的屬性和方法是需要借助于ref,蘇哦一本文小編給大家介紹了vue3父組件如何使用ref獲取獲取子組件的屬性和方法,文中詳細(xì)的代碼講解,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue 組件封裝 并使用 NPM 發(fā)布的教程,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
常見的打印有JavaScript打印、jQuery、vue打印,這里主要講述vue使用vue-print-nb進(jìn)行打印,廢話不多說,直接手摸手上代碼,感興趣的朋友可以參考下2024-01-01
antd?select?多選限制個數(shù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了antd?select?多選限制個數(shù),實(shí)現(xiàn)思路和核心代碼都很簡單，其中核心代碼在于disabled，代碼簡單易懂需要的朋友可以參考下2022-11-11
VUE3+vite項(xiàng)目中動態(tài)引入組件與異步組件的詳細(xì)實(shí)例
在做vue3項(xiàng)目中時,每次使用都需要先進(jìn)行引入,下面這篇文章主要給大家介紹了關(guān)于VUE3+vite項(xiàng)目中動態(tài)引入組件與異步組件的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue全家桶-vuex深入講解，文章內(nèi)容詳細(xì)，簡單易懂，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2023-01-01
element-ui table行點(diǎn)擊獲取行索引（index）并利用索引更換行順序
這篇文章主要介紹了element-ui table行點(diǎn)擊獲取行索引（index）并利用索引更換行順序，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02