Web开发之v-model和model-value区别

v-modelmodel-value 是在处理表单数据绑定时使用的不同概念,它们分别服务于不同的目的和场景。

1、v-model

用于实现组件内部的双向数据绑定,特别适用于表单元素和支持双向绑定的自定义组件。语法简洁,可以直接在组件模板中使用,实现用户输入和数据属性的双向同步。

1.1、组件内部双向绑定

v-model在组件内使用,实现自己组件内部表单元素与数据的双向绑定,当在表单元素(如 <input>、<textarea>、<select> 等)或支持双向绑定的自定义组件上使用 v-model 时,它会自动同步元素的值与相应 Vue 实例的数据属性。用户在表单元素中输入时,数据属性会被更新;反之,如果数据属性发生变化,表单元素的显示值也会相应更新。

1.2、v-model语法

v-model 实际上是 v-bind 和 v-on 的语法糖,它简化了对表单元素值的绑定和监听。例如,<input v-model="message"> 相当于 <input :value="message" @input="message = $event.target.value">。

1.3、v-model代码实例

示例中的代码实现了一个简单的输入框与数据属性的双向绑定,用户在输入框中输入内容时,数据属性会自动更新,反之亦然。

html 复制代码
<template>
  <input v-model="inputValue" />
</template>

<script setup>
import { ref } from 'vue';

const inputValue = ref('');
</script>

使用了 Vue 3 的 ref 来创建一个响应式变量 inputValue,然后在模板中使用了 v-model 来将输入框的值与 inputValue 双向绑定。当用户在输入框中输入内容时,inputValue 的值会自动更新,同时当你在代码中更新 inputValue 的值时,输入框中的内容也会相应地更新。

2、 model-value

用于实现组件间的双向数据绑定,主要用于自定义组件与 v-model 之间的绑定

2.1、组件之间通信(组件间数据双向绑定)

model-value(通常写作 modelValue)是 Vue 3 中为了实现自定义组件与 v-model 之间清晰、灵活的双向绑定而引入的一个约定俗成的 prop 名称。主要出现在 Vue.js 自定义组件的上下文中,特别是在 Vue 3 中,它是实现自定义组件与外部进行表单数据双向绑定的一种方式。

需要注意的是v-model-value 指令本身并不是 Vue.js 的内置指令,而是开发者约定的一种用法,通常需要在子组件中对 modelValue 进行声明和处理,以实现双向数据绑定。

2.2、model-value语法

父组件则通过 v-model 在自定义组件上绑定相应的数据属性(用于自己组内绑定修改值,也用来传递给子组件数据)。

自定义子组件需要定义一个名为 modelValue(注意大小写)的 prop 接收父组件传递的初始值,并在组件内部通过 $emit('update:modelValue', newValue) 触发一个特定事件来通知父组件更新值。

2.3、model-value代码实例

示例中的代码展示了一个父组件和子组件之间通过 model-value 实现双向数据绑定的过程,子组件中的输入框值的变化会同步到父组件中,反之亦然。

父组件:

html 复制代码
<!-- ParentComponent.vue -->
<template>
  <div>
    <p>Parent Component</p>
    <CustomInput v-model="parentValue" />
    <p>Parent Value: {{ parentValue }}</p>
  </div>
</template>

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

const parentValue = ref('');
</script>

子组件:

html 复制代码
<!-- CustomInput.vue -->
<template>
  <input :value="modelValue" @input="updateValue($event.target.value)" />
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: {
    type: String,
    required: true,
  },
});

const emit = defineEmits();

const updateValue = (newValue) => {
  emit('update:modelValue', newValue);
};
</script>

在这个例子中,ParentComponent.vue 中的 <CustomInput v-model="parentValue" /> 中的 v-model 将 parentValue 绑定到了 CustomInput 组件的 modelValue 上。子组件 CustomInput.vue 中的 modelValue 接收了父组件传递的值,并且当输入框的值发生变化时,通过 $emit('update:modelValue', newValue) 事件通知父组件更新值。

这样,通过 model-value,实现了父组件和子组件之间的双向数据绑定。

3、总结

  • v-model 适用于组件内部的双向数据绑定,简化了表单元素与数据属性之间的同步。
  • model-value 适用于组件间的双向数据绑定,用于自定义组件与 v-model 之间的清晰、灵活的绑定。
  • 虽然在功能上有所区别,但在实现双向数据绑定方面,两者都能有效地处理数据流动。

通过了解和运用 v-model 和 model-value,能够更灵活地处理 Vue.js 中的数据绑定,提高组件间的通信和数据流的处理效率。

相关推荐
OpenTiny社区几秒前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠30 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞34 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js