关键词：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
