首页 > 其他分享 >监听 watch props对象属性监听 或深度监听

监听 watch props对象属性监听 或深度监听

时间:2024-04-02 14:24:03浏览次数:16  
标签:watch props measuresItems 深度 true 监听

对象属性监听 

  props: {
    baseFormObj: Object,
  },
   watch: {
    'baseFormObj.measuresItems': {
      immediate: true, // 如果需要组件创建时立即监听,设置为true
      handler(newVal, oldVal) {
        // 当myProperty变化时,这里的代码会被执行
      }
    }
  },

深度监听

  props: {
    measuresItems: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    // 使用深度监听来观察prop的变化
    measuresItems: {
      handler (newValue, oldValue) {
        // 当prop变化时,这里会执行你想要的操作
        this.endArrFn(newValue);
      },
      deep: true // 开启深度监听
    }
  },

 

标签:watch,props,measuresItems,深度,true,监听
From: https://www.cnblogs.com/dianzan/p/18110473

相关文章

  • vue中表单修改提交前利用watch找出新数据和原来数据之间的改动
    <template><div><[email protected]="submitForm"><inputv-model="formData.name"type="text"placeholder="Name"><inputv-model="formData.email"type......
  • 事件监听
    packagecom.example.observer.customization.event;importjava.util.EventObject;/***事件的抽象*/publicabstractclassAppEventextendsEventObject{/***ConstructsaprototypicalEvent.**@paramsourceTheobjectonwhichtheE......
  • 监听检测页面长时间未操作后事件
    代码写于App.vue页面,相当于全局监听,每个路由是被包含在div中的!<template><divid="app"@click="clickDiv"><router-view></router-view></div></template><script>exportdefault{name:"App",da......
  • Error in callback for immediate watcher “chartsData“: “Error: Initialize fail
     在使用echarts提示dom未找到,原因就是当我们封装了echarts组件初始化传值时通常会造成过早调用,也就是在数据还未处理完就已经调用init函数进行初始化,此时dom还未挂载成功,就会报这个错,这里解决可以使用nextTick()函数在初始化时延时调用;this.$nextTick(()=>{this.draw......
  • springboot 监听请求
    加个这个类就可以了importorg.springframework.stereotype.Component;importjavax.servlet.*;importjavax.servlet.http.HttpServletRequest;importjava.io.BufferedReader;importjava.io.IOException;@ComponentpublicclassLoggingFilterimplementsFilter{@Overri......
  • web前端之页面逐渐呈现代码功能、对象数据如何获取下一个值、创建元素并添加id与类名
    MENU前言style(全部代码)JavaScript(核心代码)html(基本代码)前言1、效果演示以视频为准,暂未录视频(敬请期待);2、私信或微信可获取完整代码(WX:MJ682517)style(全部代码)*{margin:0;padding:0;box-sizing:border-box;}::-webkit-scrol......
  • 监听器 Listener
    目录1、什么是Listener 2、在Web中的重要作用3、怎样使用4、在不同层面的应用1)JavaScript事件监听:2)Web框架中的监听器:3)应用服务器和容器中的监听器:区别:1、什么是Listener Listener是计算机科学中的一个重要概念,用于监视和响应特定事件的发生。在Web中,监听器的作......
  • 一个vue3指令,兼容pc与移动端的拖动tab切换,鼠标拖动与触摸拖动触控监听
    <Viewclass="app-tabs-container":class="{appear:state.showTabsTrans}"v-tabs-pointer-event:[state.hasMove]="handleProductChange"><router-viewv-slot="{Component}"><KeepAlive>......
  • Extraneous non-props attributes (title) were passed to component but could not b
    大概意思就是给子组件传递的属性,由于子组件呈现片段或文本根节点,无法自动继承;就是"透传Attributes"。对于多根节点的组件没有自动attribute透传行为;如果$attrs没有被显式绑定,将会抛出一个运行时警告。解决方式:手动显示绑定$attrs(1)模板 <template> <h1>多根节点的At......
  • C# Stopwatch
    Stopwatch:提供一组方法和属性,可以准确的测量运行时间。使用的时候需要引用命名空间:System.Diagnostics。1//创建Stopwatch实例2Stopwatchsw=newStopwatch();3//开始计时4sw.Start();5for(inti=0;i<100;i++)6{7Console.WriteLine(i);8}9......