子组件“双向绑定”父组件传进来的props

·  阅读 1346

背景

其实按照标题这么说是错误的,因为vue的数据是单向传递的,就是子组件不能直接修改父组件的值,需要通过特定的规则去修改,比如emit。今天就来聊聊子组件如何使用v-model绑定父组件传进来的props。这是我前几天工作中需要封装一个问卷表单组件,封装的时候遇到了子组件想通过v-model双向绑定props数据时,会报错。后来也是找到了两种办法巧妙解决。

错误示范

首先先演示一直子组件直接v-model双向绑定props时的问题。如下:

子组件:

image.png

父组件:

image.png

此时向输入框输入值时,会报一个错,意思就是子组件不能直接修改父组件的值

image.png

那么当我们封装组件的时候,子组件想双向绑定父组件传进来的值时,那该怎么做了。正常的方式是通过emit来通知父组件修改值,这里就不再多说了,这里讲一下其他方法

方法一

原理是利用对象保存的是内存地址的原理,用法如下:

子组件:

image.png

父组件:

image.png

此时我们再去修改输入框的值得时候就不会报错了

image.png

这是因为当你传对象的时候,其他复杂类型传的是内存地址,当你v-model双向绑定的是对象的某个属性时,该属性的值是改变了,但是该对象指向的内存地址并没有改变,所以子组件修改父组件的值时并不会报错。所以这也间接的能让子组件通过v-model双向绑定了父组件的数据

方法二

方法二是利用watch和.sync修饰符来实现的,其实还是利用watch和emit实现,实现如下:

子组件:

image.png

父组件:

image.png

此时修改输入框的值时也不会报错

image.png

这是我查了很多资料看到一个帖子给到的灵感,关键在于两个watch,第一个watch是用于监听父组件传进来的props数据保存到本地,然后v-model双向绑定的是本地的值,这样就不会报错说直接修改了父子件的值了。第二个watch是监听本地数据,但本地数据变化时,需要通知父组件修改值,至于emit的方法是"udpate:XXX",需要结合".sync"修饰符使用,这里就不再多说。注意的是如果传进来的不是值类型的数据,是引用类型,比如对象或者数组的,监听的时候需要深度监听,就是加上{ deep: true }

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改