木灵鱼儿

木灵鱼儿

阅读：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修饰符

文章分类 vue3 快速上手
文章标签 v-model.syncvue3
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 0获得阅读 181

版权申明

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

one
two
three

关于作者

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

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译