首页 > 其他分享 >Vue2 和 Vue3 中的 v-model 的区别#记录

Vue2 和 Vue3 中的 v-model 的区别#记录

时间:2024-04-02 13:33:51浏览次数:28  
标签:绑定 自定义 修饰符 value Vue2 Vue3 组件 model

vue3对v-model的语法进行了改动。
vue2 中有两种方式实现数据的双向绑定(组件与外部数据的双向绑定),一种是使用v-model,另一种是使用v-bind.sync修饰符。

vue2中的v-model,主要是进行value属性的绑定和input事件的派发。

<ChildComponent v-model="pageTitle" />

// 等价于
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />
//子组件
this.$emit('update:title', newValue)

//父组件
<ChildComponent :title.sync="pageTitle" />

//等价于
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

Vue3.x自定义组件实现v-model

1.子组件的props和事件,需要和v-model冒号后的绑定值相对应,例如若绑定值为v-model:text,则子组件中

props应为:props:[text] ,事件应为: update:text

2.vue3.x,删除了vue2.x中的model选项,并可以设置多个v-model

//父组件
<template>
  <div>
		<!-- v-model后不写值,默认就是modelValue -->
    <Child 
      v-model="message1"
      v-model:text="message2" 
    />
    <div>绑定的值1:{{message1}}</div>
    <div>绑定的值2:{{message2}}</div>
  </div>
</template>

//子组件
<template>
  <div>
    <!-- 3.x默认值改为了update:modelValue-->
    <input 
      type="text" 
      :value="modelValue" 
      @input="$emit('update:modelValue', $event.target.value)"
    >
    <input 
      type="text" 
      :value="text" 
      @input="$emit('update:text', $event.target.value)"
    >
  </div>
</template>
<script>
export default {
  // 3.x默认值改为了modelValue
  props:['modelValue','text']
}
</script>

vue3可以自定义 v-model 修饰符

在 Vue2 中的 v-model 上,我们用过 .trim、.lazy 和 .number这三个内置修饰符,而 Vue3 则在这个基础上增加了自定义修饰符。

<ChildComponent v-model.capitalize="name"></ChildComponent>
<!-- ChildComponent 组件 -->
 
<template>
  <div>
    <input type="text" :value="modelValue" @input="emitValue" />
  </div>
</template>
 
<script>
export default {
  props: {
    modelValue: String,
    modelModifiers: {  // 自定义修饰符会默认传入这个 prop 中
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {
    // 当组件 v-model 后面加上了自定义修饰符,组件内部会在 modelModifiers 上获取到修饰符状态
    console.log(this.modelModifiers);
  },
  methods: {
    emitValue(e) {
      let value = e.target.value;
      // 如果使用了自定义修饰符,即状态为 true,就处理值
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1);
      }
      // emit value
      this.$emit("update:modelValue", value);
    },
  },
};
</script>

如果是 v-model 带上了参数,同时使用了自定义修饰符,如下所示:

<ChildComponent  v-model:name.capitalize="nameValue"></ChildComponent >
<!-- ChildComponent  组件 -->
 
<template>
  <div>
    <input type="text" :value="name" @input="emitValue" />
  </div>
</template>
 
<script>
export default {
  props: {
    name: String,  // modelValue -> name
    nameModifiers: {  // modelModifiers -> nameModifiers
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {
    console.log(this.nameModifiers);
  },
  methods: {
    emitValue(e) {
      let value = e.target.value;
 
      // 如果使用了自定义修饰符,就处理值
      if (this.nameModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1);
      }
      // emit value
      this.$emit("update:name", value);
    },
  },
};
</script>

标签:绑定,自定义,修饰符,value,Vue2,Vue3,组件,model
From: https://blog.csdn.net/junsens/article/details/137169016

相关文章

  • vue3从精通到入门9:计算属性computed
    在Vue3中,computed 是一个用于创建计算属性的工具,它基于组件的响应式依赖进行复杂的计算,并返回一个新的响应式引用。计算属性是Vue的一个核心概念,它提供了一种声明式的方式来执行基于其依赖的响应式数据的计算。computed使用:计算属性与常规属性类似,但是它们是基于它们......
  • Cannot deserialize the current JSON array (e.g. [1,2,3]) into type ‘model’ bec
    错误:CannotdeserializethecurrentJSONarray(e.g.[1,2,3])intotype‘model’becausethetyperequiresaJSONobject(e.g.{“name”:“value”})todeserializecorrectly.TofixthiserroreitherchangetheJSONtoaJSONobject 原因:json或xml字符串中......
  • vue3 设置el-dialog height超过滚动条
     方法一:<stylescoped>::v-deep.el-dialog.el-dialog-body{height:500px;overflow-y:auto;}</style> 如果要设置动态的高度话,则要在setup里面设置 <script>exportdefaultdefineComponent({setup:{constcssContent=ref({heigh......
  • vue3中播放flv流视频,以及组件封装超全
    实现以上功能的播放,只需要传入一个流的地址即可,当然组件也只有简单的实时播放功能下面直接上组件里面的flvjs通过npmiflv.js直接下载 <template><divclass="player"style="position:relative;"><pstyle="position:absolute!important;top:10px;lef......
  • 大屏可视化项目示例--基于Vue3+vite2+echart+mock+axios+dataV
    图例: 项目环境:Vite、Echarts、Npm、Node、axios、mock、vue3、dataV。项目地址:IofTV-Screen-Vue3:......
  • Vue — Vue3.0状态管理工具Pinia
    一、什么是Pinia?Pinia是一个专门为Vue3设计的状态管理库。它的目标是提供一种简单、直观的方法来管理Vue应用的状态,同时充分利用Vue3的响应式系统和组合式API。Pinia主要特点包括:基于Vue3:Pinia是专门为Vue3设计的状态管理库,充分利用了Vue3的响应式系统......
  • Vue3创建空对象方法及推荐
    当使用{}时,我们实际上是在告诉TypeScript将空对象断言为任意类型(any),从而绕过了类型检查。这种做法会失去类型安全性,但在某些特定情况下可能是一种解决方案。以下是示例代码和说明://使用<any>{}将空对象断言为any类型letobj=<any>{};//对空对象进行操作obj.f......
  • 前端开发中Vue3+Typescript使用装饰器出现错误一则
    今天开发公司项目时,使用TS装饰器遇到一个问题。当我写完装饰器代码后进入网页,控制台提示SyntaxError:Invalidorunexpectedtoken两个小时后的排查后发现是tsconfig.json的配置问题。如果tsconfig.json文件中没有指定target选项,TypeScript编译器会默认使用es5作......
  • vue2生命周期
    什么是声明周期?生命周期概念是借鉴了软件工程和编程中普遍存在的概念,描述一个实体从开始到结束的整个过程。与植物学的生命周期相似。Vue的生命周期概念可以看作是对生物学生命周期概念的一种抽象借鉴和应用。生命周期阶段Vue实例有一个完整的生命周期,即从创建到销毁的过程......
  • vue3中任意嵌套组件传参,provide与inject
    一般父组件向子组件传值,可以通过props (defineProps).但是多级嵌套组件使用props过于麻烦,推荐可以透传的provide和inject provide提供数据   inject注入数据App.vue代码<scriptsetup>import{ref,provide}from'vue'importSonfrom"./son.vue";constgreet......