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

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

這篇文章主要介紹了VUE子組件的watch不被觸發(fā)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(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è)事件，父組件接收事件并作出處理，在處理的方法里面對(duì)this.openDetailDialog的值取反

在這里插入圖片描述

3.思路

Watch對(duì)應(yīng)的監(jiān)聽方法不被觸發(fā)，因?yàn)閣atch監(jiān)聽的key對(duì)應(yīng)的值沒有發(fā)生變化，所以加一個(gè)臨時(shí)的變量，然后通過對(duì)其取反，來保證每一次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對(duì)象可以直接監(jiān)聽，但是oldName值會(huì)有問題
    watch(stu, (newName, oldName) => {
      console.log("newName", newName);
    },{ deep: true,immediate:true });
    // 監(jiān)聽reactive對(duì)象某個(gè)屬性變化
    watch(() => stu.name,(newVal,oldVal)=>{
      console.log(newVal,'新')
      console.log(oldVal,'舊')
    },{ deep: true,immediate:true })
    // 注意子組件的props也是reactive對(duì)象
    // 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實(shí)現(xiàn)一個(gè)炫酷的日歷組件
公司業(yè)務(wù)新開了一個(gè)商家管理微信H5移動(dòng)端項(xiàng)目，日歷控件是商家管理員查看通過日程來篩選獲取某日用戶的訂單等數(shù)據(jù)。下面小編給大家?guī)砹嘶趘ue實(shí)現(xiàn)一個(gè)炫酷的日歷組件，感興趣的朋友參考下吧
2018-10-10
vue配置根目錄詳細(xì)步驟(用@代表src目錄)
vue用@表示src文件夾，引入時(shí)找文件路徑更方便,下面這篇文章主要給大家介紹了關(guān)于vue配置根目錄(用@代表src目錄)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
詳解vue中使用vue-quill-editor富文本小結(jié)（圖片上傳）
這篇文章主要介紹了詳解vue中使用vue-quill-editor富文本小結(jié)（圖片上傳），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue的表單數(shù)據(jù)收集案例之基本指令和自定義指令詳解
收集表單數(shù)據(jù)可以使用這個(gè)v-model實(shí)現(xiàn)這個(gè)數(shù)據(jù)的綁定，但是在有些輸入框中，還需要一些其他的指令搭配這個(gè)v-model指令結(jié)合使用，這篇文章主要介紹了vue的表單數(shù)據(jù)收集，基本指令和自定義指令,需要的朋友可以參考下
2023-01-01
Vue實(shí)現(xiàn)選中文本彈出彈窗功能的完多種方法
在現(xiàn)代 Web 應(yīng)用中,選中文本后顯示相關(guān)操作或信息是一種常見的交互模式,本文將詳細(xì)介紹如何在 Vue 中實(shí)現(xiàn)選中文本后彈出彈窗的功能,包括其工作原理、多種實(shí)現(xiàn)方式以及實(shí)際項(xiàng)目中的應(yīng)用示例,需要的朋友可以參考下
2025-09-09
VUE+Canvas實(shí)現(xiàn)財(cái)神爺接元寶小游戲
這篇文章主要介紹了VUE+Canvas實(shí)現(xiàn)財(cái)神爺接元寶小游戲,需要的朋友可以參考下本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2021-04-04
vue封裝一個(gè)彈幕組件詳解
這篇文章主要介紹了vue封裝一個(gè)彈幕組件詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙可以參考一下
2022-08-08
Vue配合Vant使用時(shí)area省市區(qū)選擇器的使用方式
這篇文章主要介紹了Vue配合Vant使用時(shí)area省市區(qū)選擇器的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue elementUI el-form 數(shù)據(jù)無法賦值且不報(bào)錯(cuò)的問題及解決方法
vue項(xiàng)目中使用elementUI的el-form組件,里面有部分后端數(shù)據(jù)遍歷的字段和部分確定的字段,遇到個(gè)問題遍歷的字段可以修改值但是確定的幾個(gè)字段無法修改值,下面小編給大家分享vue elementUI el-form 數(shù)據(jù)無法賦值且不報(bào)錯(cuò)的問題及解決方法,感興趣的朋友一起看看吧
2023-12-12
VUEX?使用?mutations的兩種方式
這篇文章主要介紹了VUEX?使用?mutations的兩種方式,實(shí)現(xiàn)方式就是利用vuex中的mutations，在mutations中定義一個(gè)方法，這個(gè)方法就是把點(diǎn)擊的index（也就是每個(gè)列表的唯一標(biāo)識(shí)），傳給state中的當(dāng)前標(biāo)識(shí)，需要的朋友可以參考下
2023-01-01