Vue3中 v-model 语法糖详解

简介: Vue3中 v-model 语法糖详解

前言

概览

很多同学对 Vue 的第一印象就是“响应式”、“双向绑定”等特性,而 v-model 就是实现双向绑定的语法糖,用过 Vue 的小伙伴一定都非常熟悉。但是在 Vue3 中,v-model 发生了一些改动,使得它不再兼容 Vue2 的用法,具体是什么呢?

  • 非兼容:用于自定义组件时,v-model prop 和事件默认名称已更改;
prop:value -> modelValue;
事件:input -> update:modelValue;
  • 非兼容:v-bind 的 .sync 修饰符和组件的 model 选项已移除,可在 v-model 上加一个参数代替;
  • 新增:现在可以在同一个组件上使用多个 v-model 绑定;
  • 新增:现在可以自定义 v-model 修饰符;

介绍

在 Vue 2.0 发布后,开发者使用 v-model 指令时必须使用名为 value 的 prop。如果开发者出于不同的目的需要使用其他的 prop,就不得不使用 v-bind.sync。此外,由于 v-model 和 value 之间的这种硬编码关系的原因,产生了如何处理原生元素和自定义元素的问题。

在 Vue 2.2 中,Vue 引入了 model 组件选项,允许组件自定义用于 v-model 的 prop 和事件。但是,这仍然只允许在组件上使用一个 v-model。

在 Vue 3 中,双向数据绑定的 API 已经标准化,以减少开发者在使用 v-model 指令时的混淆,并且更加灵活。

2.x 中的语法

在 2.x 中,在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件:

<template>
  <div>
    <div>父组件 -- {{count}}</div>
    <ChildComponent v-model="count" />
    <!-- 是以下的简写: -->
    <!-- <ChildComponent :value="count" @input="count = $event" /> -->
  </div>
</template>
<script>
import ChildComponent from '@/views/childComponent.vue';
export default {
  data() {
    return {
      count:100,
    };
  },
  components:{
    ChildComponent
  },
};
</script>
<template>
  <div>
    子组件 
    <input type="text" v-model.number="inputVal" @input="userInput">
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputVal:null,
    }
  },
  props:{
    value:{
      default:0,
    }
  },
  methods: {
    userInput(){
      this.$emit('input',this.inputVal)
    }
  },
  watch:{
    value:{
      handler(newVal,oldVal){
        this.inputVal = newVal;
      },
      immediate:true
    }
  }
}
</script>

这里 v-model 实际上就是为表单元素定制的,input 事件和 value prop 都是强耦合的。

如果想要更改 prop 或事件名称,则需要在 ChildComponent 组件中添加 model 选项:

<template>
  <div>
    <div>父组件 -- {{count}}</div>
    <ChildComponent v-model="count" />
    <!-- 是以下的简写: -->
    <!-- <ChildComponent :customParams="count" @change="count = $event" /> -->
  </div>
</template>
<template>
  <div>
    子组件 
    <input type="text" v-model.number="inputVal" @input="userInput">
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputVal:null,
    }
  },
  model: {
    prop: 'customParams',
    event: 'change'
  },
  props:{
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 customParams 代替 value 作为 model 的 prop
    customParams: {
      default: 0,
    }
  },
  methods: {
    userInput(){
      console.log(this.inputVal)
      this.$emit('change',this.inputVal)
    }
  },
  watch:{
    customParams:{
      handler(newVal,oldVal){
        this.inputVal = newVal;
      },
      immediate:true
    }
  }
}
</script>

使用 v-bind.sync

传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解

3.x 中的语法

在 3.x 中,自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件:

<template>
  <div>
    <div>父组件 -- {{count}}</div>
    <ChildComponent v-model="count"/>
    <!-- 是以下的简写: -->
    <!-- <ChildComponent :modelValue="count" @update:modelValue="count = $event"/> -->
  </div>
</template>
<script>
import { ref } from 'vue';
import ChildComponent from '@/components/childComponent.vue'
export default {
  components:{
    ChildComponent,
  },
  setup(){
    const count = ref(100);
    return {
      count,
    } 
  }
}
</script>
<template>
  <div>
    子组件 
    <input type="text" v-model.number="inputVal" @input="userInput">
  </div>
</template>
<script>
import { ref, watch } from 'vue';
export default {
  props:{
    modelValue:{
      default:0,
    }
  },
  setup(props,{emit}) {
    const inputVal = ref(null);
    const userInput = () => {
      emit('update:modelValue', inputVal.value)
    };
    watch(props,(newVal,oldVal) => {
      inputVal.value = props.modelValue;
    },{immediate:true})
    return {
      userInput,
      inputVal,
    }
  },
}
</script>

v-model 参数

若需要更改 model 的名称,现在我们可以为 v-model 传递一个参数,以作为组件内 model 选项的替代:

<ChildComponent v-model:title="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

2020062310470442.png

这也可以作为 .sync 修饰符的替代,而且允许我们在自定义组件上使用多个 v-model。

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
<!-- 是以下的简写: -->
<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"/>

v-model 修饰符

除了像 .trim 这样的 2.x 硬编码的 v-model 修饰符外,现在 3.x 还支持自定义修饰符:

<ChildComponent v-model.capitalize="pageTitle" />
相关文章
|
2天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
2天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
2天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
5天前
|
JavaScript API
vue3知识点:ref函数
vue3知识点:ref函数
16 2
|
5天前
|
JavaScript API
Vue3快速上手简介
Vue3快速上手简介
19 2
|
5天前
|
API
vue3知识点:reactive函数
vue3知识点:reactive函数
13 1
|
5天前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
12 0
|
3天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
3天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
20 9
|
2天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。