Vue3使用setup監(jiān)聽props實現方法詳解

更新時間：2023年08月20日 16:13:06 作者：黃金原野

這篇文章主要為大家介紹了Vue3使用setup監(jiān)聽props實現方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

背景描述

子組件展示父組件傳來的參數，展示的信息隨著父組件上tab的切換動態(tài)更新。

一開始的想法是單獨監(jiān)聽這個傳遞的參數，但看了VUE3的文檔之后，似乎對參數的監(jiān)聽必須精確到屬性。例如參數為

{
      name: 'Doctor',
      gender: 'Timelord'
}

需要在子組件的watch中寫明監(jiān)聽的是name還是gender。
該參數中有很多可能會改變的屬性，一一監(jiān)聽過于麻煩。所以改變思路，使用監(jiān)聽props來獲取所有所有傳參。

實現方法

在父組件中，用于傳遞給子組件的參數必須為響應式(eg. reactive)，否則子組件在監(jiān)聽時不會監(jiān)測到變換，watch永遠不會生效

immediate是立即開始監(jiān)聽，在頁面首次渲染時可能為顯示為undefined，如果watch的變化需要手動觸發(fā)，不需要開啟

deep默認開啟，可以忽略（參數為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實現方法詳解的詳細內容，更多關于Vue3 setup監(jiān)聽props的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

Vue如何優(yōu)雅的清除定時器
定時器如果不及時合理地清除，會造成業(yè)務邏輯混亂甚至應用卡死的情況，這個時就需要清除定時器，本文就介紹了Vue如何優(yōu)雅的清除定時器，感興趣的可以了解一下
2021-07-07
vue3標簽中的ref屬性詳解及如何使用$refs獲取元素
這篇文章主要給大家介紹了關于vue3標簽中的ref屬性詳解及如何使用$refs獲取元素的相關資料,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
2024-11-11
vue滾動軸插件better-scroll使用詳解
這篇文章主要為大家詳細介紹了vue滾動軸插件better-scroll的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
vue3父組件使用ref獲取子組件的屬性和方法
在vue3中父組件訪問子組件中的屬性和方法是需要借助于ref,蘇哦一本文小編給大家介紹了vue3父組件如何使用ref獲取獲取子組件的屬性和方法,文中詳細的代碼講解,需要的朋友可以參考下
2023-11-11
Vue 組件封裝并使用 NPM 發(fā)布的教程
這篇文章主要介紹了Vue 組件封裝并使用 NPM 發(fā)布的教程,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-09-09
vue實現表格打印功能
常見的打印有JavaScript打印、jQuery、vue打印,這里主要講述vue使用vue-print-nb進行打印,廢話不多說,直接手摸手上代碼,感興趣的朋友可以參考下
2024-01-01
antd?select?多選限制個數的實現代碼
這篇文章主要介紹了antd?select?多選限制個數,實現思路和核心代碼都很簡單，其中核心代碼在于disabled，代碼簡單易懂需要的朋友可以參考下
2022-11-11
VUE3+vite項目中動態(tài)引入組件與異步組件的詳細實例
在做vue3項目中時,每次使用都需要先進行引入,下面這篇文章主要給大家介紹了關于VUE3+vite項目中動態(tài)引入組件與異步組件的相關資料,需要的朋友可以參考下
2022-09-09
vue全家桶-vuex深入講解
這篇文章主要介紹了vue全家桶-vuex深入講解，文章內容詳細，簡單易懂，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2023-01-01
element-ui table行點擊獲取行索引（index）并利用索引更換行順序
這篇文章主要介紹了element-ui table行點擊獲取行索引（index）并利用索引更換行順序，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-02-02