VUE子组件的watch不被触发问题及解决

更新时间：2023年10月13日 14:57:48 作者：海到无边天作岸山登绝顶我为峰

这篇文章主要介绍了VUE子组件的watch不被触发问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

VUE子组件的watch不触发

1.起因

在父组件引入子组件，子组件引入dialog是一个弹框。

a. prop:['flag']
b.子组件是一个dialog弹框。
c. 现在的效果是：刷新页面，第一次的弹框出现，将弹框关闭之后，再次点击，弹框不出现。每次传递给子组件的flag值是一样，此时就不会触发子组件里面的 watch：{ flag: 'changeFlag' }
指定的changeFlag方法。

2.解决方法

a.父组件初始化一个字段：openDetailDialog: false
b.通过以下方式传递给子组件

open-detail-dialog="openDetailDialog"

在这里插入图片描述

c.子组件接收。从而触发方法

在这里插入图片描述

d. 关闭子组件弹框时需要注意：

在这里插入图片描述

e.通过$emit给父组件通知一个事件，父组件接收事件并作出处理，在处理的方法里面对this.openDetailDialog的值取反

在这里插入图片描述

3.思路

Watch对应的监听方法不被触发，因为watch监听的key对应的值没有发生变化，所以加一个临时的变量，然后通过对其取反，来保证每一次watch监听的值与上一次不同，从而是watch事件生效。

VUE3项目中 watch 各种不触发

watch基本格式

watch(监听的数据，作用函数，监听配置)

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

deep:true 开启深度监听

当data为reactive数据时必开启，不然不触发监听

immediate:true 页面渲染后立刻触发监听

最好所有watch都配置，不然会出现watch监听不触发问题

 	const data = ref('开始')
    const stu = reactive({
      name: '张三',
      age: '12'
    })
    watch(data, (newName, oldName) => {
      console.log("newName", newName);
    }{ immediate:true });
    // reactive对象可以直接监听，但是oldName值会有问题
    watch(stu, (newName, oldName) => {
      console.log("newName", newName);
    },{ deep: true,immediate:true });
    // 监听reactive对象某个属性变化
    watch(() => stu.name,(newVal,oldVal)=>{
      console.log(newVal,'新')
      console.log(oldVal,'旧')
    },{ deep: true,immediate:true })
    // 注意子组件的props也是reactive对象
    // props监听
    props: {
      index: {
        type: Number,
      default: 0
      }
    },
    watch(() => props.index,(newVal,oldVal)=>{
      console.log(newVal,'新')
      console.log(oldVal,'旧')
    },{ deep: true,immediate:true })

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue中bus的使用详解
这篇文章主要介绍了Vue中bus的使用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
基于Vue和Firebase实现一个实时聊天应用
在本文中,我们将学习如何使用Vue.js和Firebase来构建一个实时聊天应用,Vue.js是一种流行的JavaScript前端框架,而Firebase是Google提供的实时数据库和后端服务,结合这两者,我们可以快速搭建一个功能强大的实时聊天应用,需要的朋友可以参考下
2023-08-08
vue实现的上拉加载更多数据/分页功能示例
这篇文章主要介绍了vue实现的上拉加载更多数据/分页功能,涉及基于vue的事件响应、数据交互等相关操作技巧,需要的朋友可以参考下
2019-05-05
vscode中开发运行uniapp项目详细步骤
VSCode作为一个非常强大的代码编辑器,可以集成众多的插件和工具来优化开发效率,这篇文章主要给大家介绍了关于vscode中开发运行uniapp项目的详细步骤,需要的朋友可以参考下
2023-07-07
简单了解vue中的v-if和v-show的区别
这篇文章主要介绍了简单了解vue中的v-if和v-show的区别,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-10-10
详解vue文件中使用echarts.js的两种方式
这篇文章主要介绍了详解vue文件中使用echarts.js的两种方式，主要介绍了两种使用方式，一种是以组件的形式另一种直接引入，非常具有实用价值，需要的朋友可以参考下
2018-10-10
Vue3使用vue-qrcode-reader实现扫码绑定设备功能(推荐)
本文介绍了在Vue3中使用vue-qrcode-reader版本5.5.7来实现移动端的扫码绑定设备功能,用户通过扫描二维码自动获取设备序列号,并填充到添加设备界面,完成设备绑定的全过程,包含ScanCode.vue和DeviceAdd.vue两个主要界面的实现方式
2024-10-10
快速解决vue2+vue-cli3项目ie兼容的问题
这篇文章主要介绍了快速解决vue2+vue-cli3项目ie兼容的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue 处理异步加载顺序问题之如何在Konva中确保文本在图片之上显示
在处理Konva中的异步加载顺序问题时,确保在图像加载完成后再添加其他元素是关键,通过将回调函数放在imageObj.onload中,并正确处理变量捕获,我们可以确保文本总是绘制在图片之上,这不仅解决了显示顺序的问题,也为未来的调试提供了明确的方向,感兴趣的朋友一起看看吧
2024-07-07
详解使用vuex进行菜单管理
本篇文章主要介绍了详解使用vuex进行菜单管理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12