vue2和vue3组件v-model区别

news2024/10/5 17:19:55

前言

单向数据流，父组件传给子组件的数据，子组件只能展示，不能修改，如果需要修改则需要emit事件让父组件修改
在这里插入图片描述
有些时候，一些组件并不是通过input来进行触发事件。也就是说value和input事件在大多数情况下能够适用，但是存在value另有含义，或者不能使用input触发的情况，这时候我们就不能使用v-model进行简写了。
就比如说选择框，绑定的值是checked而不是value，接收事件不是input而是change。
为了解决这个问题，尤雨溪在Vue2.2中，引入了model组件选项，也即是说你可以通过model来指定v-model绑定的值和属性。

vue2组件v-model.

1、vue2中双向绑定单个值（input）

<ChildComponent v-model = "title />
// 实际上是下面这种的简写
<ChildComponent :value = "title"  @input = "title = $event" />

在这里插入图片描述
子组件：

<template>
  <input type="text" :value="value" @input = "inputChange">
</template>

<script>
export default {
  name: "CustomInput",
  props: ['value'],
  methods: {
    inputChange(e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

父组件：

<template>
  <div class="test">
    <span>自定义组件：</span>
    <CustomInput v-model="age"/> 
    // 等价
    // <CustomInput :value="age" @input="changeAge"/>
    {{age}}
  </div>
</template>

<script>
import CustomInput from "./CustomInput";

export default {
  name: "Test",
  components: {
    CustomInput,
  },
  data() {
    return {
      age: 20,
    }
  },
  methods: {
    changeAge(value) {
      this.age = Number(value);
    }
  }
}
</script>

在vue2中，v-model相当于用value传递了绑定值，用@input事件接收了子组件通过$emit传递的参数。

2、vue2中双向绑定单个值（非input 设置model选项）

在这里插入图片描述
在这里插入图片描述

通过上面的代码，我们可以看到通过设置model选项，我们就可以直接使用指定的属性和事件，而不需要必须使用value和input了，value和input可以另外它用了。

3、vue2中双向绑定多个值

但是这样的话写起来很麻烦，而且v-model只能绑定一个值，这样的话我的组件封装不是只能改变一个值了，这样好像也不符合开发。

所以，再看下vue2文档
在这里插入图片描述
.sync和v-model类似，就是传递值和接收事件的简写。这样的话我们就可以不用写model了。直接告诉我更新哪个值。

注意哦
在这里插入图片描述
子组件：
在这里插入图片描述
父组件：
在这里插入图片描述
所以，绑定多个值，我们可以传递一个obj下去，使用v-bind.sync=‘obj’

再看一个例子：
子组件：

<template>
  <div>
    <input :value="value" @input = "inputChange">
    <input :value="name" @input = "inputNameChange">
  </div>
</template>

<script>
export default {
  name: "CustomInput",
  props: ['value', 'name'],
  methods: {
    inputChange(e) {
      this.$emit('input', e.target.value)
    },
    inputNameChange(e) {
      this.$emit('update:name', e.target.value);
    }
  }
}
</script>

父组件：

<template>
  <div class="test">
    <span>自定义组件：</span>
    <CustomInput v-model="age" :name.sync="name"/> 
    // 此处v-model相当于:value="age" @input="age=$event"
  </div>
</template>

<script>
import CustomInput from "./CustomInput";

export default {
  name: "Test",
  components: {
    CustomInput,
  },
  data() {
    return {
      name: 'yn',
      age: 20,
    }
  },
  methods: {
    // changeAge(value) {
    //   this.age = Number(value);
    // }
  }
}
</script>

是不是学着有点懵B，又是.sync 又是update:title的，vue3又删除了.sync，看下vue3的吧，更好用

vue3组件v-model

通过上面知道vue2.x中既然v-model的主要原因是由于value和input事件可能另有它用，那么我们可不可以直接使用另外的属性和方法，而不需要去通过model进行定义。
vue3中就实现了这个功能，v-model绑定的不再是value，而是modelValue，接收的方法也不再是input，而是update:modelValue。使用方法如下：

1、vue3中双向绑定单个值

v-model 在原生元素上的用法：

<input v-model="searchText" />

其实等价于下面这段：

<input :value="searchText" @input="searchText = $event.target.value"/>

而当使用在一个组件上时，v-model 会被展开为如下的形式：

<CustomInput
  :modelValue="searchText"
  @update:modelValue="newValue => searchText = newValue"
/>

在子组件中写法是：

export default defineComponent({
    name:"CustomInput",
    props:{
        modelValue:String,   // v-model绑定的属性值
    },
    setup(props, {emit}) {
        const updateValue = (e: KeyboardEvent) => {
          emit("update:modelValue",targetValue);   // 传递的方法
        }
    }
}

也就是说vue3中，value改成了modelValue，input方法了改成update:modelValue

再看个例子
子组件：

<template>
  <div class='CustomInput'>
    <input :value="modelValue" @input = "inputChange">
  </div>
</template>

<script>
export default {
  name: 'CustomInput',
  props: {
    modelValue: String,
  },
  setup(props, {emit}) {
    function inputChange(e) {
      emit('update:modelValue', e.target.value)
    };
    return {
      inputChange,
    }
  }
};
</script>

父组件：

<template>
  <div class='test'>
  <CustomInput v-model="name"/>
    {{name}}
  </div>
</template>

<script>
import CustomInput from './CustomInput';
import { defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'test',
  components: {
    CustomInput
  },
  setup() {
    const name = ref('zm');
    return {
      name
    }
  }
});
</script>

2、vue3中双向绑定多个值

例子1：

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>

<script setup>
defineProps({
  firstName: String,
  lastName: String
})

defineEmits(['update:firstName', 'update:lastName'])
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

例子2：
父组件：

<template>
  <div class='test'>
  <CustomInput v-model:name="name" v-model:age="age"/>
    {{name}} {{age}}
  </div>
</template>

<script>
import CustomInput from './CustomInput';
import { defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'test',
  components: {
    CustomInput
  },
  setup() {
    const name = ref('zm');
    const age = ref(20);
    return {
      name,
      age
    }
  }
});

子组件：

<template>
  <div class='CustomInput'>
    <input :value="age" @input = "inputChange">
    <input :value="name" @input = "inputNameChange">
  </div>
</template>

<script>
export default {
  name: 'CustomInput',
  props: {
    name: String,
    age: Number,
  },
  setup(props, {emit}) {
    function inputChange(e) {
      emit('update:age', e.target.value)
    };
    function inputNameChange(e) {
      emit('update:name', e.target.value);
    }
    return {
      inputChange,
      inputNameChange,
    }
  }
};
</script>

3、v-model参数

默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。我们可以通过给 v-model 指定一个参数来更改这些名字：

<MyComponent v-model:title="bookTitle" />

那么在子组件中，就可以使用title代替modelValue

<!-- MyComponent.vue -->
<script setup>
defineProps(['title'])
defineEmits(['update:title'])
</script>

<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  />
</template>

也就是说，我们最终的使用方法是：

<ChildComponent v-model:title="title"  />
// 或者
<ChildComponent :title="title" @update:title = "title = $event" />

再看个例子
父组件：

<template>
  <div id="app">
    <h1>Vue3中v-model的变化</h1>
    <input type="text" v-model="name"/>
    <p>{{ name }}</p>
    <!-- Vue2的写法 -->
    <!-- v-model实际上就是:value和@input的语法糖 -->
    <!-- 双向绑定多个属性的时候可以使用.sync关键字 -->
    <CustomInput v-model="age" :name.sync="name"/>
    <!-- Vue3的写法 -->
    <CustomInput v-model:age="age" v-model:name="name"/>
  </div>
</template>

<script>
import CustomInput from "../components/CustomInput.vue";
export default {
  name: "App",
  components: {
  	CustomInput
  },
	data() {
    return {
    	name: "你好",
      age: 20,
    }
  },
}
</script>

子组件：

<template>
  <div class="custom-input">
    <h1>自定义的input</h1>
    <!-- Vue2的写法 -->
    <input type="text" :value="value" @input="onInput" />
    <input type="text" :value="name" @input="onNameInput" />
    <!-- Vue3的写法 -->
    <input type="text" :value="age" @input="onInput" />
    <input type="text" :value="name" @input="onNameInput" />
  </div>
</template>

<script>
import CustomInput from "../components/CustomInput.vue";
export default {
  // Vue2的写法
  props: ["value", "name"],
  // Vue3的写法,直接接收绑定的参数
  props: ["age", "name"],
  // Vue3双向绑定单个属性时，可以使用modelValue来接收参数并更新,对应的触发事件为update:modelValue
  props: ["modelValue"],
  methods: {
  	onInput(e) {
      // Vue2的写法
      // 触发的事件只能是input
      // e.target.value是字符串需要转换成数字
    	this.$emit("input", parseInt(e.target.value));
      // Vue3的写法
      this.$emit("update:age", e.target.value);
    },
    onNameInput(e) {
      // 只能用update
    	this.$emit("update:name", e.target.value);
    },
  },
}
</script>

好了，到目前为止，我们介绍了vue2中的v-model的使用以及问题，vue3中v-model的新的使用语法。赶快去体验vue3的使用吧。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/661504.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ROS2性能分析

ROS2性能分析

文章&#xff1a;Performance Analysis of ROS2 作者&#xff1a;Deepak Charan Logavaseekaran, Rakshith Macha Billava 编辑&#xff1a;点云PCL 欢迎各位加入知识星球&#xff0c;获取PDF论文&#xff0c;欢迎转发朋友圈。文章仅做学术分享&#xff0c;如有侵权联系删文。未…
阅读更多...
3-dubbo框架,应用程序,模块领域模型Model对象的初始化

3-dubbo框架,应用程序,模块领域模型Model对象的初始化

在上一章中我们详细看了服务配置ServiceConfig类型的初始化,不过我们跳过了AbstractMethodConfig的构造器中创建模块模型对象的过程 那为什么会在Dubbo3的新版本中加入这个域模型呢,主要有如下原因 之前dubbo都是只有一个作用域的&#xff0c;通过静态类 属性共享 增加域模型是…
阅读更多...
MacBook充电限制工具AlDente Pro

MacBook充电限制工具AlDente Pro

AlDente Pro是一款适用于Mac操作系统的小工具&#xff0c;可以帮助您限制电池充电量以延长电池寿命。通常情况下&#xff0c;电池在充满的状态下会继续接受电源充电&#xff0c;这可能会导致电池寿命缩短。使用AlDente Pro&#xff0c;您可以设置电池只充到特定的充电水平&…
阅读更多...
使用omp并行技术实现快排加速

使用omp并行技术实现快排加速

快排基本原理&#xff1a; 快速排序可以说是最为常见的排序算法&#xff0c;冒泡排序时间复杂度达到了O&#xff08;N2&#xff09;&#xff0c;而桶排序容易造成浪费空间。快排&#xff08;Quicksort&#xff09;就成为了不错的选择。 1、原理&#xff1a;快排需要找一个数作…
阅读更多...
【Nexus】上传jar至Nexus的两种方式

【Nexus】上传jar至Nexus的两种方式

目录 一、前言二、pom文件添加推送代码配置1、配置pom.xml文件2、配置maven的settings.xml文件3、执行上传①、点击Maven-Lifecycle-deploy-Run Maven Build②、出现以下提示则上传成功③、这时&#xff0c;在Nexus的nexus-snapshot-hosted&#xff08;快照类型的托管资源库&am…
阅读更多...
【Python】函数进阶 ③ ( 函数作为参数传递 )

【Python】函数进阶 ③ ( 函数作为参数传递 )

文章目录 一、函数参数传递类型二、代码示例 - 函数参数传递类型 一、函数参数传递类型 之前介绍的函数 , 都是 接收具体的 变量 或 字面量 数据 作为参数 , 如 : 数字 / 布尔值 / 字典 / 列表 / 元组 等 ; 函数 也可以作为参数 , 传入另一个函数中 ; 在 Python 中&#xff0…
阅读更多...
主成分分析——SPSS实例分析

主成分分析——SPSS实例分析

主成分分析是用原始变量的线性组合来表示主成分&#xff0c;且主成分彼此之间互不相关&#xff0c;且能反映出原始数据的绝大部分信息。 一般来说&#xff0c;当研究的问题涉及到多变量且变量之间存在很强的相关性时&#xff0c;我们可考虑使用主成分分析的方法来对数据进行简化…
阅读更多...
智能的突破或许在智能之外

智能的突破或许在智能之外

人工智能已经取得了不少令人瞩目的成果&#xff0c;但是仍然存在着许多问题和挑战&#xff0c;这些问题和挑战也许只能通过跨学科的合作和人类的智慧来解决&#xff0c;因此智能的突破在智能之外。在人工智能的决策过程中&#xff0c;往往会缺乏人类的道德判断和社会责任感&…
阅读更多...
2018年全国硕士研究生入学统一考试管理类专业学位联考英语（二）试题

2018年全国硕士研究生入学统一考试管理类专业学位联考英语（二）试题

2018 年全国硕士研究生入学统一考试 管理类专业硕士学位联考 英语&#xff08;二&#xff09;试卷 考生须知 1&#xff0e;考生必须严格遵守各项考场规则。 2&#xff0e;答题前&#xff0c;考生将答题卡上的“姓名”、“考生编号”等信息填写清楚&#xff0c;并与准考证上的致…
阅读更多...
【SpringCloud】Eureka 案例上手稍微带点原理

【SpringCloud】Eureka 案例上手稍微带点原理

文章目录 1. 前置工作1.1 搭建 user-server1.1.1 pom1.1.2 po&#xff0c;mapper&#xff0c;controller1.1.3 yml1.1.4 启动类1.1.5 启动并访问 1.2 搭建 order-server1.2.1 pom1.2.2 po mapper controller1.2.3 yml1.2.4 启动类1.2.5 启动并访问 1.3 两个服务通信 2. Eureka2…
阅读更多...
Qt Xml的读、写、修改、删除

Qt Xml的读、写、修改、删除

一、说明 Xml文件的创建、读取、修改、删除以下图格式为例。 二、导入xml QT core gui xml三、创建Xml void MainWindow::Xml_Write(QString path) {//! 打开或创建文件QFile file(path);if(!file.open(QIODevice::WriteOnly | QIODevice::Truncate)) return; //! …
阅读更多...
【MySQL篇】Select语句原理详解

【MySQL篇】Select语句原理详解

文章目录 MYSQL体系结构模块详解架构分层连接层服务层存储引擎 SQL的执行流程连接查询缓存语法解析和预处理词法解析语法分析预处理器 查询优化器执行计划存储引擎存储引擎基本介绍如何选择存储引擎&#xff1f; 执行引擎举例说明 对于一个开发工程师来说&#xff0c;了解一下 …
阅读更多...
C语言读写ini配置文件

C语言读写ini配置文件

环境 windows 10 64bitClion 2023.1 ini简介 ini 文件格式是一种用于保存配置信息的简单文本格式。它通常由多个节(section)组成&#xff0c;每个节包含多个键值对(key-value pair)。 下面是 ini 文件的基本语法规则 一个ini文件由多个节组成&#xff0c;每个节用方括号([])括起…
阅读更多...
《Java黑皮书基础篇第10版》 第17章【笔记】

《Java黑皮书基础篇第10版》 第17章【笔记】

第十七章 二进制I/O 17.1 引言 文件可以不严谨的分类为文本文件和二进制文件。文本文件指的是可以用文件编辑器进行查看和修改的&#xff0c;二进制文件则不可以使用文本编辑器查看和修改。 例如&#xff0c;Test.java文件储存在文本文件中&#xff0c;因此可以用文本编辑器…
阅读更多...
MapReduce程序基本架构

MapReduce程序基本架构

MapReduce程序是以&#xff08;键/值&#xff09;对的形式来处理数据的&#xff0c;即可以通过以下的形式来表示&#xff1a; map: (K1,V1) ➞ list(K2,V2) reduce: (K2,list(V2)) ➞ list(K3,V3) 不令人惊奇的是&#xff0c;这是一种超越一般数据的数据流表示形式。在本文中…
阅读更多...
使用PyMC进行时间序列分层建模

使用PyMC进行时间序列分层建模

在统计建模领域&#xff0c;理解总体趋势的同时解释群体差异的一个强大方法是分层(或多层)建模。这种方法允许参数随组而变化&#xff0c;并捕获组内和组间的变化。在时间序列数据中&#xff0c;这些特定于组的参数可以表示不同组随时间的不同模式。 今天&#xff0c;我们将深…
阅读更多...
ood的5C解题法（1）----管理类面试对象设计

ood的5C解题法（1）----管理类面试对象设计

管理类 概念 可以模拟/代替管理员日常工作的系统 下面用停车场系统做演示 答题流程 Clarify What&#xff1a;除题目中的名词外&#xff0c;从管理的名词考虑 parking lot是什么类型的&#xff1f;如果楼有多层&#xff0c;停车位也是多层&#xff0c;则parking lot->pa…
阅读更多...
Windows Server 2019 OVF, updated Jun 2023 (sysin) - VMware 虚拟机模板

Windows Server 2019 OVF, updated Jun 2023 (sysin) - VMware 虚拟机模板

Windows Server 2019 OVF, updated Jun 2023 (sysin) - VMware 虚拟机模板 2023 年 6 月版本更新&#xff0c;现在自动运行 sysprep&#xff0c;支持 ESXi Host Client 部署 请访问原文链接&#xff1a;https://sysin.org/blog/windows-server-2019-ovf/&#xff0c;查看最新…
阅读更多...
5、产品经理的工作职责OR主要工作技能和工具

5、产品经理的工作职责OR主要工作技能和工具

1、产品经理的工作职责 我们通过一个案例来了解产品经理的工作职责。 老板让你给他点餐&#xff0c;你应该怎么做&#xff1f;你需要考虑哪一些方面的问题&#xff1f; 例如&#xff1a;你预算多少&#xff0c;预算是十块钱还是100块还是1000块。有没有忌口&#xff0c;口味…
阅读更多...
【MYSQL篇】Update语句原理详解

【MYSQL篇】Update语句原理详解

文章目录 前言缓冲池Buffer PoolInnoDB 内存结构redo logundo logBinlog 总结 前言 前面的文章我们已经对MySQL的查询语句的执行流程进行了说明&#xff0c;感兴趣的可以去看看&#xff1a; 【MySQL篇】Select语句原理详解 本篇文章我们来聊聊 MySQL更新语句的执行原理。更新…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023