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实现一个炫酷的日历组件
公司业务新开了一个商家管理微信H5移动端项目，日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。下面小编给大家带来了基于vue实现一个炫酷的日历组件，感兴趣的朋友参考下吧
2018-10-10
vue配置根目录详细步骤(用@代表src目录)
vue用@表示src文件夹，引入时找文件路径更方便,下面这篇文章主要给大家介绍了关于vue配置根目录(用@代表src目录)的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
详解vue中使用vue-quill-editor富文本小结（图片上传）
这篇文章主要介绍了详解vue中使用vue-quill-editor富文本小结（图片上传），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue的表单数据收集案例之基本指令和自定义指令详解
收集表单数据可以使用这个v-model实现这个数据的绑定，但是在有些输入框中，还需要一些其他的指令搭配这个v-model指令结合使用，这篇文章主要介绍了vue的表单数据收集，基本指令和自定义指令,需要的朋友可以参考下
2023-01-01
Vue实现选中文本弹出弹窗功能的完多种方法
在现代 Web 应用中,选中文本后显示相关操作或信息是一种常见的交互模式,本文将详细介绍如何在 Vue 中实现选中文本后弹出弹窗的功能,包括其工作原理、多种实现方式以及实际项目中的应用示例,需要的朋友可以参考下
2025-09-09
VUE+Canvas实现财神爷接元宝小游戏
这篇文章主要介绍了VUE+Canvas实现财神爷接元宝小游戏,需要的朋友可以参考下本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2021-04-04
vue封装一个弹幕组件详解
这篇文章主要介绍了vue封装一个弹幕组件详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙可以参考一下
2022-08-08
Vue配合Vant使用时area省市区选择器的使用方式
这篇文章主要介绍了Vue配合Vant使用时area省市区选择器的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue elementUI el-form 数据无法赋值且不报错的问题及解决方法
vue项目中使用elementUI的el-form组件,里面有部分后端数据遍历的字段和部分确定的字段,遇到个问题遍历的字段可以修改值但是确定的几个字段无法修改值,下面小编给大家分享vue elementUI el-form 数据无法赋值且不报错的问题及解决方法,感兴趣的朋友一起看看吧
2023-12-12
VUEX 使用 mutations的两种方式
这篇文章主要介绍了VUEX 使用 mutations的两种方式,实现方式就是利用vuex中的mutations，在mutations中定义一个方法，这个方法就是把点击的index（也就是每个列表的唯一标识），传给state中的当前标识，需要的朋友可以参考下
2023-01-01