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中Echarts使用动态数据的两种实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
这篇文章主要介绍了vue-cli3.0如何使用CDN区分开发、生产、预发布环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家介绍了富文本编辑器quill.js开发之自定义格式扩展,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
Ruoyi-Vue处理跨域问题同时请求多个域名接口(前端处理方法)
跨域问题一直都是很多人比较困扰的问题,这篇文章主要给大家介绍了关于Ruoyi-Vue处理跨域问题同时请求多个域名接口的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-05-05
vue3+element-plus Dialog对话框的使用与setup 写法的用法
这篇文章主要介绍了vue3+element-plus Dialog对话框的使用 与 setup 写法的使用,本文通过两种方式结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了基于vue 实现token验证的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-12-12
当我们谈论或讨论在 Vue 中创建用户界面组件时,经常会提到可重用性,在 Vue 中创建真正的可重用组件可能很棘手,在本文中,我将探讨可重用组件的概念、应用这些组件时面临的问题,以及为什么必须尽可能克服这些问题,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了你准备好迎接vue3.0了吗,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
详解vue中使用express+fetch获取本地json文件
本篇文章主要介绍了详解vue中使用express+fetch获取本地json文件，非常具有实用价值，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了Vue瀑布流插件的使用示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论