zoukankan      html  css  js  c++  java
  • 关于props的注意事项!

    起于昨晚大半夜在群里看到有人问这个问题,在子组件的data属性里重新赋值props属性 this.a = this.propA,不生效!

    提示了他如果是异步的话,就要注意watch.决定今日敲个demo分析一下过程。

    官方文中中其实有提到,用计算属性。父组件值传入子组件,一个单向数据流,如果是重新把prop的属性值赋值给了子组件的其他data属性,需要用计算属性。

    会刷新值的前提是没有去做重新赋值给子组件的其他data属性,那么这个props其实相当于在子组件中就是响应式变量,一旦变化会触发更新!

    但是,如果在子组件中props的属性重新赋值给了data的另外一个属性,这时候其实相当于赋值了固定的值给某属性。

    上图中,父组件传的值是propA,初始值传个1,定时器2秒钟后再去改变propA的值,然后子组件3秒后,a的值肯定是不会再变的。

    如果父组件传的该值是异步的情况下,子组件对应的该值也是变化了的,但由于你是在初始化时候赋值给了其他,意思是想要其他的属性替代这个props的属性,

    这个操作,其实是切断了响应式关联的,关于响应式,文档中的深入响应式原理也有提到:

    上述的this.a = this.propA,这个重新赋值,propA这个值在父组件变化并传递到子组件中后,对于this.a并不能监测到变化,

    this.a = this.propA其实相当于this .a = 3,那么propA变化了,a是不可能也跟着变的。因为PropA的监察者以及setter、getter跟a属性的setter是毫无关联的。

    所以解决方式是通过监听或者计算属性,可以watch propA的变化,然后手动去更新a的值。这样才能做到视图同步变化!

  • 相关阅读:
    POJ 1915 简单 广搜题
    poj 2479 最大子数段
    poj 1321 深搜题
    hdu 1024 最大子段和
    .net 学习总结
    [转]SharpDevelop源码分析 (二、主程序+隐藏的初始化)
    工作六年经验分享:软件工程师如何修炼(转)
    Ajax命名空间一个获取指定的页面元素的快捷方式——$get()
    [转]SharpDevelop代码分析 (一、序+基本概念)
    [转]SharpDevelop源码分析 (三、插件系统)
  • 原文地址:https://www.cnblogs.com/hjj2ldq/p/9413529.html
Copyright © 2011-2022 走看看