vue3中v-model解析

最新推荐文章于 2024-09-12 16:43:23 发布

壮士阿

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量269

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_39580561/article/details/136217604

版权

本文详细解释了Vue中v-model的使用方法，包括在HTML输入元素和自定义组件上的应用，以及如何处理不同modelValue属性的命名和更新。

摘要由CSDN通过智能技术生成

在vue中，官方提供了一个 v-model 的api，可以很方便实现数据双向绑定

解析一下v-model
当v-model用在html标签上的时候，是这样的

<input type="text" v-model="username" />

实现原理是这样的

<input type="text" :value="username" @input="username = $event.target.value" />

当v-model用在组件标签上，原理是这样的（vue3默认是modelValue）

<XInput :modelValue="username" @update:modelValue="username = $event"/>

// XInput组件
<template>
  <input 
	type="text"
	:value="modelValue"
	@input="emit('update:modelValue',(<HTMLInputElement>$event.target).value)"
  />
</template>

<script setup lang="ts" name="XInput">
  defineProps(['modelValue'])
  const emit = defineEmits(['update:modelValue'])
</script>

如果要更改modelvalue属性值为name，可以在用的地方这样。同时这里也就可以写多个v-model，命名不一样就行

// 这里更改后同理下面的字组件也要改成name
<XInput v-model:name="username"/>

// XInput组件
<template>
  <input 
	type="text"
	:value="name"
	@input="emit('update:name',(<HTMLInputElement>$event.target).value)"
  />
</template>

<script setup lang="ts" name="XInput">
  defineProps(['name'])
  const emit = defineEmits(['update:name'])
</script>