Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

方法一:子组件watch(监听)父组件数据的变化watch基础类型的变量data(){return{frontPoints:0}},watch:{frontPoints(newValue,oldValue){console.log(newValue)}}数组的watchdata(…

大家好,又见面了,我是你们的朋友全栈君。

方法一:子组件watch(监听)父组件数据的变化

  1. watch基础类型的变量
data() {
    return {
        frontPoints: 0    
    }
},
watch: {
    frontPoints(newValue, oldValue) {
        console.log(newValue)
    }
}
  1. 数组的watch
data() {
    return {
        winChips: new Array(11).fill(0)   
    }
},
watch: {
  winChips: {
    handler(newValue, oldValue) {
      for (let i = 0; i < newValue.length; i++) {
        if (oldValue[i] != newValue[i]) {
          console.log(newValue)
        }
      }
    },
    deep: true
  }
}
  1. 对象的watch
    只要bet中的属性发生变化(可被监测到的),便会执行handler函数。
data() {
  return {
    bet: {
      pokerState: 53,
      pokerHistory: 'local'
    }   
    }
},
watch: {
  bet: {
    handler(newValue, oldValue) {
      console.log(newValue)
    },
    deep: true
  }
}
  1. 对象的具体属性watch(活用computed)
    如果想监测具体的属性变化,如pokerHistory变化时,才执行handler函数,则可以利用计算属性computed做中间层。 事例如下:
data() {
  return {
    bet: {
      pokerState: 53,
      pokerHistory: 'local'
    }   
    }
},
computed: {
  pokerHistory() {
    return this.bet.pokerHistory
  }
},
watch: {
  pokerHistory(newValue, oldValue) {
    console.log(newValue)
  }
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/129742.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • ps磨皮滤镜portraiture安装教程mac[通俗易懂]

    ps磨皮滤镜portraiture安装教程mac[通俗易懂]PortraitureforMac激活成功教程版是Photoshop上一款支持自动皮肤平滑、愈合和增强效果的磨皮插件,这款portraiture磨皮滤镜主要针对人像进行皮肤修饰、磨皮润色等处理,portraituremac激活成功教程版还可以平滑和去除缺陷,同时保留皮肤纹理和重要的人像细节,功能十分强大,这里为大家带来portraiture激活成功教程版,并附上激活成功教程补丁。portraiture激活成功教程方…

  • s一般怎么称呼自己的m_男人一般都这样称呼自己的情人?

    s一般怎么称呼自己的m_男人一般都这样称呼自己的情人?阅读本文前,请您先点击上面的“蓝色字体”,再点击“关注”,这样您就可以继续免费收到文章了。每天都会有分享,都是免费订阅,请您放心关注。注:本文转载自网络,不代表本平台立场,仅供读者参考,著作权属归原创者所有。我们分享此文出于传播更多资讯之目的。如有侵权,请在后台留言联系我们进行删除,谢谢!…

  • ue4 插件开发(ue4性能优化)

    UE4插件研发UE4插件扫盲UE4插件是什么UE4插件的作用UE4引擎、项目、插件的区别引擎自带的插件浏览器插件目录结构插件配置文件说明UE4插件的创建方法插件代码的执行过程四种常用模式的插件模板第三方库的引入牛刀小试创建Actor到视图插件插件发布常见的问题插件项目案例UE4插件扫盲UE4插件是什么UE4引擎和UE4项目是由各个模块组成的,其主要编程语言是C++。插件也是一个模块,说到插…

  • 打开pkl文件_smpl是什么文件

    打开pkl文件_smpl是什么文件如何打开pkl文件importpicklepath=’data/dictionary_v1.pkl’#path=’/root/……/aus_openface.pkl’pkl文件所在路径f=open(path,’rb’)data=pickle.load(f)print(data)

  • java控制台输入数组_Java控制台输入数组并逆序输出的方法实例

    java控制台输入数组_Java控制台输入数组并逆序输出的方法实例输入一个数组,然后颠倒次序进行输出,这种算法在程序开发中经常用到,下面我们通过一个小实例来看看怎么实现在控制台输入一个数组,并让其逆序输出的。源码:importjava.util.Scanner;publicclassTest01{publicstaticvoidmain(String[]args){System.out.println(“请输入五个数”);int[]l=newi…

  • jsp文件开头<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 > 有什么用

    jsp文件开头<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 > 有什么用http://www.w3.org/TR/html4/loose.dtd”> 声明位于文档中的最前面的位置,处于  标签之前。DOCTYPE是DocumentType(文档类型)的简写,此标签用来告知浏览器文档使用哪种 HTML 或 XHTML 规范。Eg:

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号