当前位置：首页 > article >正文

【Vue3】自定义Input组件

article 2024/11/5 14:47:22

实现一个类似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>