升级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)。

由此，就可以在父元素用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)}}}

升级Vue2.0后prop不能双向绑定的解决办法相关推荐

Win10 64位系统8G内存升级到10G后，显示3.92G可用解决办法
Win10 64位系统,原来两根4G海力士内存,现在加了一根2G金士顿内存,但是查看到10G内存却显示3.92G可用,笔者多年前也遇到不少这样的问题,由于笔者比较懒,解决后也懒得写博客分享,今天再次遇 ...
装了McAfee VirusScan Enterprise 8.0后FoxMail不能发邮件的解决办法
安装McAfee VirusScan Enterprise8.0i后,foxmail无法发送邮件,这是因为McAfee VirusScan Enterprise默认关闭25端口.这个问题很容易解决,你 ...
QQ升级到2012后自定义的表情没了，解决办法
打开QQ上的[系统设置]->[基本设置]->[文件管理]->[打开个人文件夹],打开文件夹后,把"customface.db"和"customface. ...
新笔记本安装ubuntu17.0后黑屏只能外界显示器解决办法，只是经验
sudo apt-get purge bumblebee* sudo stop lightdm sudo apt-get install nvidia-331 nvidia-prime #成功安装pr ...
Vue2.3.0+使用.sync修饰符对prop进行双向绑定/子组件同步prop到父组件绑定的值
vue2.3.0+使用.sync修饰符对prop进行双向绑定背景.概念: 在一些情况下,我们可能会需要对一个 prop 进行"双向绑定".事实上,这正是 Vue 1.x 中的.s ...
vue2.0通过Axios导出excel文件（解决乱码问题）
vue2.0通过Axios导出excel文件(解决乱码问题) 参考文章: (1)vue2.0通过Axios导出excel文件(解决乱码问题) (2)https://www.cnblogs.com/ad ...
CentOS最小化安装后AR8151网卡驱动未安装解决办法
最近拿来一台PC,12年的时候安装的CentOS6.2(x64),那个时候使用的是外置网卡,最小化安装系统时,主板自带网卡没有显示出来也就没注意,但是最近需要用到双网卡,就郁闷了.于是发生了下面一系列 ...
win10修改系统配置处理器引导参数后，系统无限蓝屏解决办法
win10修改系统配置处理器引导参数后,系统无限蓝屏解决办法 0:开机时先按f8进入安全模式,在进入命令提示符 1.进入启动修复的命令提示符(最好是使用有管理员权限的,不过普通用户我也每试过), ...
linux 防止启动多个进程,linux下tomcat启动后出现多个java进程解决办法
当前位置:我的异常网» Linux/Unix » linux下tomcat启动后出现多个java进程解决办法 linux下tomcat启动后出现多个java进程解决办法 www.myexception ...

升级Vue2.0后prop不能双向绑定的解决办法

前言

步骤

升级Vue2.0后prop不能双向绑定的解决办法相关推荐

最新文章

热门文章