【Vue3】自定义Input组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Vue3】自定义Input组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实现一个类似el-input的组件，可以v-model双向绑定。

v-model作用于组件时，相当于

<template>
  <MyInput v-model="user_name" /> 
  <MyInput :modelValue="user_name" @update:modelValue="user_name = $event" />
</template>

父组件

<template>
  <MyInput v-model="user_name" /> 
</template>

<script setup lang="ts" name="Home123">
import { ref } from "vue"
import MyInput from "./MyInput.vue"

let user_name = ref("")
</script>

<style scoped></style>

自定义Input组件

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

<script setup lang="ts" name="MyInput123">
defineProps(["modelValue"])
let emits = defineEmits(["update:modelValue"])
</script>

<style scoped>
input {
  width: 200px;
  height: 40px;
  background-color: antiquewhite;
  border: 1px solid #efefef;
  border-radius: 5px;
}
</style>

v-model默认以 :modelValue 以及 @update:modelValue 两步实现。
如果绑定多个v-model就需要自定义属性名，可以在v-model后添加 :属性名

<template>
  <MyInput v-model:user="user_name" /> 
</template>

子组件中将原先modelValue变为自定义属性名

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

<script setup lang="ts" name="MyInput123">
defineProps(["user"])
let emits = defineEmits(["update:user"])
</script>

子组件中Input的 $event 是什么，以及什么时候可以.target。
对于原生事件来说, $event就是事件对象，所以可以.target。
对于自定义事件来说, $event就是触发事件时，所传递的数据。文章来源地址https://www.toymoban.com/news/detail-842603.html

到了这里，关于【Vue3】自定义Input组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！