props: {
homeData: {
type: Object,
required: true
}
},
父组件传递给子组件是对象homeData或者数组: homeData={name:'zs',list:[1,2,3]} name list都是vue 响应式的
子组件的props去接收homeData 是可以在页面中直接使用homeData对象里面属性值的 homeData.name homeData.list
也包括子组件里面的method/computed 访问到的name  list 都是实时更新的
并且,父组件或子组件如果去修改homeData里面的name/list,父组件和子组件都是同时改变。因为引用是同一份数据。
缺点是:子组件可以直接修改父组件的值。可能带来隐藏问题
如果不想子组件去修改父组件homeData里面的name list。就需要把name list 赋值到子组件的data里面,作为初始化值使用
以后就使用子组件定义的name list,但是如果父组件homeData里面的name list发生改变,子组件的data里面name list不会同时改变,
如果想产生联系,就需要在子组件的watch属性去监视homeData的name/list ,虽然子组件的props里面定义的是homeData,
但是确实可以监视的到homeData.list /homeData.name的属性值变化。
这样的效果是:父组件的值改变子组件也会同步修改。并且子组件的值发生改变,是不会引起父组件值变化。
缺点是:增加了很多重复逻辑和代码量
 
 结论是:改变传过来对象属性,父组件同步更改。并且watch设置深度监听是有效的
      直接增加传过来对象的属性,props数据子组件和父组件都会新加,但不是响应式,页面不会有任何变化
      并且 设置watch深度监听也是无效的
      如果设置新加属性也是响应式,必须使用Vue.set或者this.$set方法
 

最新文章

  1. sql server删除默认值(default)的方法
  2. 【HTML】Iframe中的onload事件
  3. linux的计划任务crontab
  4. PHP 时区设置
  5. 【锋利的JQuery-学习笔记】输入框提示语-隐藏/显示
  6. 由一个简单需求到Linux环境下的syslog、unix domain socket
  7. oracle概念
  8. nginx部署静态网站
  9. PEP525--异步生成器
  10. 初识Scala
  11. 还需要注册的是我们还有一个是“交差集” cross join, 这种Join没有办法用文式图表示,因为其就是把表A和表B的数据进行一个N*M的组合,即笛卡尔积。表达式如下:
  12. falcon适配ldap密码同步
  13. Chrome下解决本地异步请求失败的问题(Origin null is not allowed by Access-Control-Allow-Origin. )
  14. Druid搭配log4j2输出SQL语句和结果
  15. 【BZOJ2658】[Zjoi2012]小蓝的好友(mrx) 平衡树维护笛卡尔树+扫描线
  16. redis事务和脚本
  17. PM2部署资料
  18. 【.Net】 【C++】容器类型对照
  19. ThinkPHP 多数据库自动连接设计
  20. python中多重继承与获取对象

热门文章

  1. 8道python练习题,能做出来的没几个
  2. 久等了,你要的 Python 书籍推荐,来了
  3. 在图像中隐藏数据:用 Python 来实现图像隐写术
  4. 19、State 状态模式
  5. Grazing on the Run 题解
  6. 测试面试题集锦(四)| Linux 与 Python 编程篇(附答案)
  7. C#LeetCode刷题之#599-两个列表的最小索引总和​​​​​​​​​​​​​​(Minimum Index Sum of Two Lists)
  8. 支持向量机SVM介绍
  9. 【USACO13DEC】 最优挤奶 - 线段树
  10. topic的相关操作