vue2.x props双向数据绑定

错误:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "val" (found in component )

在Vue2中,为了防止子组件无意间修改了父组件的状态,将props改为了单向数据绑定,子组件只能接收父组件的值,而不能修改它。
虽然可以正常的执行内容,但是会报以上的错误。

解决办法:


image.png

在子组件中,避免直接操作传进来的val值

  1. 接收传进来的val值
  2. 自定义myVal
  3. 监听val 及 myVal (当val变化时,将值赋给myVal。当myVal变化时将值传给父组件 ‘val-change’为事件名,在父组件中用于接收val)
image.png

在父组件中,将子组件传过来的值赋给val ( val变化,子组件的val也会同时变化)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,275评论 0 6
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,096评论 0 29
  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 5,665评论 0 32
  • 【敬畏】-【体验】-【持续】-【交给】-【显现】 1、缺啥补啥,怕啥练啥 2、一切为我所用,所用为团队 3、我要变...
    魏晋凯阅读 187评论 0 0
  • 今天突然想到了一个很可怕的问题,自己有没有思考过自己以后的生活,突然,我给不了自己答案了。 期待中的生活在...
    蓦麓阅读 413评论 0 0