自定义组件(父子组件)的双向数据绑定
写法 1 :
①父组件用法:
②子组件写法:
// 点击该按钮触发父子组件的数据同步// 接收父组件传递的value值 // 注意,这种实现方法,这里只能使用value属性名 props: { value: { type: Boolean, default: false } }, methods: { confirm () { // 双向数据绑定父组件:value对应的值 // 通过$emit触发父组件input事件,第二个参数为传递给父组件的值,这里传递了一个false值 // 可以理解为最上面展示的@input="msg = $event.target.value"这个事件 // 即触发父组件的input事件,并将传递的值‘false’赋值给msg this.$emit('input', false) } }
以上这种方式实现的父子组件的 v - model 通信,虽可行,但限制了我们必须 popos 接收的属性名为 value 和 emit 触发的必须为 input ,这样就容易有冲突,特别是在表单里面。所以,为了更优雅的使用 v - model 通信而解决冲突的问题,我们可以通过在子组件中使用 model 选项
写法 2 :
父组件写法:
子组件写法:
// model选项用来避免冲突 // prop属性用来指定props属性中的哪个值用来接收父组件v-model传递的值 // 例如这里用props中的show来接收父组件传递的v-model值 // event:为了方便理解,可以简单理解为父组件@input的别名,从而避免冲突 // event的值对应了你emit时要提交的事件名,你可以叫aa,也可以叫bb,但是要命名要有意义哦!!! model: { prop: 'show', event: 'changed' }, props: { // 由于model选项中的prop属性指定了,所以show接收的是父组件v-model传递的值 show: { type: Boolean, default: false } }, methods: { confirm () { // 双向数据绑定父组件传递的值 // 第一个参数,对应model选项的event的值,你可以叫aa,bbb,ccc,起名随你 this.$emit('changed', false) } }