脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → VUE子组件的watch不触发

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 })

总结

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

您可能感兴趣的文章:

相关文章

最新评论