prop数据双向绑定

关键词：Vue2.0，父子组件传值，prop数据双向绑定
在做vue项目的时候，发现一些问题以前碰到过，但是没有及时总结出现的问题及原因，导致重新花费时间找答案，在此总结在学习vue的过程中出现的一些问题，方便后续查看

1.父子组件传数据出现以下错误

错误提示

props单向数据流动，即只能由父组件改变prop状态，子组件不能改变父组件状态

解决方法：实现组件数据双向绑定
eg. 模态框显示与关闭(Modal使用iview)

父组件

<div class="container">
  <!-- modal -->
   <modal :visible="showModal" @on-change="change"></modal>
</div>

data () {
  return {
    showModal: false
  }
},
methods: {
//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
  change (val) {
    this.showModal = val 
 }
 }
});

  }
}

子组件

<Modal title="提示" v-model="InfoModal">
  ...
</Modal>

props: {
  visible: {
    type: Boolean,
    default: false
  }
},
data () {
  InfoModal: this.visible  //①创建props属性visible的副本--InfoModal
},
methods: {
  //③组件内对InfoModal变更后向外部发送事件通知
  handleChange (val) {
    this.$emit('on-change', val)
  }
},
// ②监听外部对props属性visible的变更，并同步到组件内的data属性InfoModal中
 },
watch: {
  visible (val) {
    this.InfoModal = val
  }
}

Vue2.0中，实现组件属性的双向绑定方式
核心：组件内部自己变了告诉外部，外部决定要不要变。
步骤：

在组件内的data对象中创建一个props属性的副本
创建针对props属性的watch来同步组件外对props的修改
创建针对props副本的watch，通知到组件外(在组件内向外层（父组件）发送通知，通知组件内属性变更，然后由外层（父组件）自己来变更他的数据)

更多参考详见 http://www.jb51.net/article/98881.htm

prop数据双向绑定

推荐阅读更多精彩内容