最近在使用element-ui的dialog组件二次封装成独立组件使用时，子组件需要将关闭dialog状态返回给父组件，简单的说就是要实现父子组件之间的数据双向绑定问题。
大致代码如下：
1，父组件
<template>
<button @click="openDialog">打开弹窗</button>
<dialogCompenent :show="result" :result="result" @dialogData="closeDialog"></dialogCompenent>
</template>
<script type="text/babel">
import dialogCompenent from '/dialogCompenent'
export default {
data () {
return {
result: false
}
},
components: {
dialogCompenent
},
methods: {
openDialog () {
this.result = true
},
closeDialog (data) {
this.result = data
}
}
}
</script>
2，子组件 childCompenent
<template>
<el-dialog
title="弹框组件"
:visible.sync="result"
@open="doOpen"
@close="doClose"
:show="result"
size="tiny">
<div class="content-wrapper">
具体业务代码...
</div>
</el-dialog>
</div>
</template>
<script type="text/babel">
import videoApi from '../../api/videoApi/videoApi'
export default {
name: 'dialogCompenent',
props: {
result: Boolean
},
methods: {
doOpen () {
...
},
doClose () {
this.$emit('dialogData', false)
...
}
}
}
</script>
程序在浏览器上虽然能够正常运行，但是在vue2.0却会报错：
[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: "result" (found in component )
组件内不能修改props的值，同时修改的值也不会同步到组件外层，即调用组件方不知道组件内部当前的状态是什么
这是什么原因造成的呢？
在vue1.x版本中利用props的twoWay和.sync绑定修饰符就可以实现props的双向数据绑定。
在vue2.0中移除了组件的props的双向数据绑定功能，如果需要双向绑定需要自己来实现。
在vue2.0中组件的props的数据流动改为了只能单向流动，即只能由（父组件）通过组件的v-bind：attributes传递给（子组件），子组件只能被动接收父组件传递过来的数据，并在子组件内不能修改由父组件传递过来的props数据。
官方文档解释：
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
虽然废弃了props的双向绑定对于整个项目整体而言是有利且正确的，但是在某些时候我们确实需要从组件内部修改props的需求
在Vue2.0中，实现组件属性的双向绑定方式
子组件修改：
<template>
<el-dialog
title="弹框组件"
:visible.sync="openStatus"
@open="doOpen"
@close="doClose"
:show="openStatus"
size="tiny">
<div class="content-wrapper">
具体业务代码...
</div>
</el-dialog>
</div>
</template>
<script type="text/babel">
import videoApi from '../../api/videoApi/videoApi'
export default {
name: 'dialogCompenent',
props: {
result: Boolean
},
/*创建一个openStatus变量缓存result数据
*在子组件需要调用result的地方调用data对象openStatus
*/
data () {
return {
openStatus: this.result
}
},
//新增result的watch，监听变更同步到openStatus
//监听父组件对props属性result的修改，并同步到组件内的data属性
watch: {
result (val) {
this.openStatus = val
}
},
methods: {
doOpen () {
...
},
doClose () {
this.$emit('dialogData', false)//子组件对openStatus修改后向父组件发送事件通知
...
}
}
}
</script>
父组件修改：
<template>
<button @click="openDialog">打开弹窗</button>
<dialogCompenent :show="result" :result="result" @dialogData="closeDialog"></dialogCompenent>
</template>
<script type="text/babel">
import dialogCompenent from '/dialogCompenent'
export default {
data () {
return {
result: false
}
},
components: {
dialogCompenent
},
methods: {
openDialog () {
this.result = true
},
closeDialog (data) {
this.result = data//子组件触发父组件事件，进行数据变更，同步result数据
}
}
}
</script>
至此，实现了子组件内数据与父组件的数据的双向绑定，组件内外数据的同步。最后归结为一句话就是：组件内部自己变了告诉外部，外部决定要不要变。
结语
那么为什么vue1.0还有的数据双向绑定在vue2.0版本中反而抛弃了呢，通过上述案例我们也可以发现双向绑定的props代码多，不利于组件间的数据状态管理，尤其是在复杂的业务中更是如此，所以尽量不使用这种方式的双向绑定，过于复杂的数据处理使用vuex来进行数据管理。（https://vuex.vuejs.org/zh-cn/intro.html）