VUE子組件的watch不被觸發(fā)問題及解決

更新時(shí)間：2023年10月13日 14:57:48 作者：海到無邊天作岸山登絕頂我為峰

這篇文章主要介紹了VUE子組件的watch不被觸發(fā)問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

VUE子組件的watch不觸發(fā)

1.起因

在父組件引入子組件，子組件引入dialog是一個(gè)彈框。

a. prop:['flag']
b.子組件是一個(gè)dialog彈框。
c. 現(xiàn)在的效果是：刷新頁面，第一次的彈框出現(xiàn)，將彈框關(guān)閉之后，再次點(diǎn)擊，彈框不出現(xiàn)。每次傳遞給子組件的flag值是一樣，此時(shí)就不會(huì)觸發(fā)子組件里面的 watch：{ flag: 'changeFlag' }
指定的changeFlag方法。

2.解決方法

a.父組件初始化一個(gè)字段：openDetailDialog: false
b.通過以下方式傳遞給子組件

open-detail-dialog="openDetailDialog"

在這里插入圖片描述

c.子組件接收。從而觸發(fā)方法

在這里插入圖片描述

d. 關(guān)閉子組件彈框時(shí)需要注意：

在這里插入圖片描述

e.通過$emit給父組件通知一個(gè)事件，父組件接收事件并作出處理，在處理的方法里面對this.openDetailDialog的值取反

在這里插入圖片描述

3.思路

Watch對應(yīng)的監(jiān)聽方法不被觸發(fā)，因?yàn)閣atch監(jiān)聽的key對應(yīng)的值沒有發(fā)生變化，所以加一個(gè)臨時(shí)的變量，然后通過對其取反，來保證每一次watch監(jiān)聽的值與上一次不同，從而是watch事件生效。

VUE3項(xiàng)目中 watch 各種不觸發(fā)

watch基本格式

watch(監(jiān)聽的數(shù)據(jù)，作用函數(shù)，監(jiān)聽配置)

watch(data,
 (newData, oldData) => {},
 { immediate: true, deep: true })

deep:true 開啟深度監(jiān)聽

當(dāng)data為reactive數(shù)據(jù)時(shí)必開啟，不然不觸發(fā)監(jiān)聽

immediate:true 頁面渲染后立刻觸發(fā)監(jiān)聽

最好所有watch都配置，不然會(huì)出現(xiàn)watch監(jiān)聽不觸發(fā)問題

 	const data = ref('開始')
    const stu = reactive({
      name: '張三',
      age: '12'
    })
    watch(data, (newName, oldName) => {
      console.log("newName", newName);
    }{ immediate:true });
    // reactive對象可以直接監(jiān)聽，但是oldName值會(huì)有問題
    watch(stu, (newName, oldName) => {
      console.log("newName", newName);
    },{ deep: true,immediate:true });
    // 監(jiān)聽reactive對象某個(gè)屬性變化
    watch(() => stu.name,(newVal,oldVal)=>{
      console.log(newVal,'新')
      console.log(oldVal,'舊')
    },{ deep: true,immediate:true })
    // 注意子組件的props也是reactive對象
    // props監(jiān)聽
    props: {
      index: {
        type: Number,
      default: 0
      }
    },
    watch(() => props.index,(newVal,oldVal)=>{
      console.log(newVal,'新')
      console.log(oldVal,'舊')
    },{ deep: true,immediate:true })

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue中bus的使用詳解
這篇文章主要介紹了Vue中bus的使用,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04
基于Vue和Firebase實(shí)現(xiàn)一個(gè)實(shí)時(shí)聊天應(yīng)用
在本文中,我們將學(xué)習(xí)如何使用Vue.js和Firebase來構(gòu)建一個(gè)實(shí)時(shí)聊天應(yīng)用,Vue.js是一種流行的JavaScript前端框架,而Firebase是Google提供的實(shí)時(shí)數(shù)據(jù)庫和后端服務(wù),結(jié)合這兩者,我們可以快速搭建一個(gè)功能強(qiáng)大的實(shí)時(shí)聊天應(yīng)用,需要的朋友可以參考下
2023-08-08
vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁功能示例
這篇文章主要介紹了vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁功能,涉及基于vue的事件響應(yīng)、數(shù)據(jù)交互等相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
vscode中開發(fā)運(yùn)行uniapp項(xiàng)目詳細(xì)步驟
VSCode作為一個(gè)非常強(qiáng)大的代碼編輯器,可以集成眾多的插件和工具來優(yōu)化開發(fā)效率,這篇文章主要給大家介紹了關(guān)于vscode中開發(fā)運(yùn)行uniapp項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下
2023-07-07
簡單了解vue中的v-if和v-show的區(qū)別
這篇文章主要介紹了簡單了解vue中的v-if和v-show的區(qū)別,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
詳解vue文件中使用echarts.js的兩種方式
這篇文章主要介紹了詳解vue文件中使用echarts.js的兩種方式，主要介紹了兩種使用方式，一種是以組件的形式另一種直接引入，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-10-10
Vue3使用vue-qrcode-reader實(shí)現(xiàn)掃碼綁定設(shè)備功能(推薦)
本文介紹了在Vue3中使用vue-qrcode-reader版本5.5.7來實(shí)現(xiàn)移動(dòng)端的掃碼綁定設(shè)備功能,用戶通過掃描二維碼自動(dòng)獲取設(shè)備序列號(hào),并填充到添加設(shè)備界面,完成設(shè)備綁定的全過程,包含ScanCode.vue和DeviceAdd.vue兩個(gè)主要界面的實(shí)現(xiàn)方式
2024-10-10
快速解決vue2+vue-cli3項(xiàng)目ie兼容的問題
這篇文章主要介紹了快速解決vue2+vue-cli3項(xiàng)目ie兼容的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue?處理異步加載順序問題之如何在Konva中確保文本在圖片之上顯示
在處理Konva中的異步加載順序問題時(shí),確保在圖像加載完成后再添加其他元素是關(guān)鍵,通過將回調(diào)函數(shù)放在imageObj.onload中,并正確處理變量捕獲,我們可以確保文本總是繪制在圖片之上,這不僅解決了顯示順序的問題,也為未來的調(diào)試提供了明確的方向,感興趣的朋友一起看看吧
2024-07-07
詳解使用vuex進(jìn)行菜單管理
本篇文章主要介紹了詳解使用vuex進(jìn)行菜單管理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-12-12