升级Vue2.0后prop不能双向绑定的解决办法
前言 【升级Vue2.0后prop不能双向绑定的解决办法】从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)。
下面贴上示例代码：
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 = https://www.it610.com/article/val
},
currentValue: function (val) {
this.$emit('input', val)
}
}
}推荐阅读
- 开学第一天（下）
- 爱就是希望你好好活着
- 三十年后的广场舞大爷
- Y房东的后半生14
- 七年之痒之后
- jhipster|jhipster 升级无效问题
- MediaRecorder前后摄像头同时录像
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 迷失的世界（二十七）
- 上班后阅读开始变成一件奢侈的事