木灵鱼儿

木灵鱼儿

阅读:181

最后更新:2022/08/17/ 22:51:32

vue3 v-model

在vue2的时候,v-model和.sync修饰符在职能上是一样的,容易混淆,在vue3时做了统一,为此移除了.sync修饰符,以及组件内的model选项,新增了可以多个v-model的使用方式。

我们先看看vue2的v-model写法:

<ChildComponent v-model="pageTitle" />

<!-- 等同于 -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

model选项

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    title: {
      type: String,
      default: 'Default title'
    }
  },
  methods: {
    onClick() {
      this.$emit("change", "xxx");
    }
  }
}
<ChildComponent v-model="pageTitle" />

使用.sync其实也差不多,只是不用v-model了

<ChildComponent :title.sync="pageTitle" />
export default {
  props: {
    title: {
      type: String,
      default: 'Default title'
    }
  },
  methods: {
    onClick() {
      this.$emit("update:title", "xxx");
    }
  }
}

由于职能都差不多,很容易造成使用上的混乱,或者有的人要么不使用,要么就是乱用,vue3对这个地方进行了调整。

下面是vue3的写法:

<ChildComponent v-model="pageTitle" />

<!-- 等同于: -->
<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

首先是默认绑定的值由原来的value改为modelValue,默认使用的input事件也改为update:modelValue,从这里就可以看出,其实vue3就是将model与sync进行融合了。

除了默认的用法,还可以像sync那样,实现多个model绑定,其格式如下:

v-model:propName="pageTitle"

model后面接一个参数用于表示绑定的prop值,还是很好理解的。

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

<!-- 等同于: -->
<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>

使用了参数后,会默认生成一个@update:propName的自定义事件,个人建议是这个事件自己手动在组件的emits中再声明一下。

<script>
export default {
  props: ['title', 'content'],
  emits: ['update:title', 'update:content'],
}
</script>

虽然说不声明emits也能用就是了。

input的model

上述所说的都是针对组件形式的model绑定,如果是input这些表单元素,其实还是会按照vue2的那种形式:

<input v-model="searchText" />

<!-- 等同于 -->
<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

只有在组件的时候value会被转为modelValue,事件input转为update:modelValue

修饰符

vue2之前是无法在model绑定的时候使用自定义修饰符的,现在vue3支持了,使用方式稍微有点奇怪,但是官方文档已经有很详细的用法了,这里就自行查看文档吧!

处理v-model修饰符

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 181

相关文章