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)方法詳解的詳細內(nèi)容，更多關于Vue3 setup監(jiān)聽props的資料請關注腳本之家其它相關文章！
相關文章
本文主要介紹了vue-router后臺鑒權流程實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
在Vue3中,defineProps()函數(shù)是定義和接收組件屬性的主要方式,通過簡單定義或?qū)ο蠖x,開發(fā)者可以靈活地接收并處理組件上的屬性值,簡單定義方式通過數(shù)組傳遞屬性名,而對象定義則可以約束屬性的數(shù)據(jù)類型、默認值及是否必須傳遞等2024-09-09
這篇文章主要介紹了vue項目中$t()的意思是什么，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue單頁面實現(xiàn)當前頁面刷新或跳轉時提示保存，在當前頁面刷新或跳轉時提示保存并可取消刷新，以防止填寫的表單內(nèi)容丟失，感興趣的小伙伴們可以參考一下2018-11-11
在vue項目創(chuàng)建的后初始化首次使用stylus安裝方法分享
下面小編就為大家分享一篇在vue項目創(chuàng)建的后初始化首次使用stylus安裝方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue前后端分離如何解決每次請求session都會變的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要給大家介紹了關于vue中Axios的封裝與API接口的管理的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-08-08
這篇文章主要介紹了Vue.js單向綁定和雙向綁定,結合實例形式分析了vue.js單向綁定與雙向綁定相關原理、實現(xiàn)方法及操作技巧,需要的朋友可以參考下2018-08-08
Axios是一個功能強大、易用性高的HTTP庫,適用于大多數(shù)的前端項目,它提供了豐富的功能和靈活的配置選項,可以滿足不同項目的需求,這篇文章主要介紹了vue中使用axios的作用,需要的朋友可以參考下2023-08-08
vue.js+Element實現(xiàn)表格里的增刪改查
本篇文章主要介紹了vue.js+Element實現(xiàn)增刪改查，具有一定的參考價值，有興趣的可以了解一下。2017-01-01