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