前言
从Vue1.0升级到Vue2.0后,有很多改动,今天来讨论下prop没有了sync之后的解决方法。
从官方角度来讲,为了规范数据流动,砍掉了.sync,目的很明显,阻止子组件影响父组件的数据。
然而有很多时候还是需要双向绑定的,比如表单组件。所以可以用用于表单组件的v-model来实现双向绑定,对应的prop也就是value
注意:这里依然不能直接修改prop属性的值,依然会违反规定,这里使用内置的$emit将值传给父组件,由父组件修改后重新传给子组件,以达到双向绑定的效果,如果强行修改prop属性的值vue会报错
步骤
定义一个变量(假设为:currentValue,默认值为false)用于修改。
在prop中定义value。
设定watcher监视value的变化,将value的值给currentValue。
监视currentValue变化,在回调中写
this.$emit('input', val)
。
由此,就可以在父元素用v-model进行双向绑定啦~
下面贴上示例代码:
export default{
props: {
value: {
type: Boolean,
default: false
}
},
data () {
return {
currentValue: false
}
},
methods: {
},
components: {
'mt-popup': Popup
},
mounted: function () {
},
computed: {
},
watch: {
value: function (val) {
this.currentValue = val
},
currentValue: function (val) {
this.$emit('input', val)
}
}
}