Vue3 自定义UI组件(Input)

效果如下

自定义UI组件LuoFenMingInput.vue代码

<template>
    <input type="text" 
    :value="modelValue"
    @input="emit('update:modelValue',$event.target.value)"
    >
</template>
 
<script setup name="LuoFenMingInput">
import { defineProps,defineEmits } from 'vue'
defineProps(['modelValue'])
const emit= defineEmits(['update:modelValue'])
</script>
 
<style scoped>
input{
    border: 2px solid black;
    background-image:linear-gradient(45deg, red,yellow,green);
    height: 30px;
    font-size: 20px;
    color: white;
}
</style>

调用自自定义UI组件LuoFenMingInput.vue

<template>
  <LuoFenMingInput v-model="userName" />

  <!-- vue的 v-model 的实现原理是以下代码  -->
  <!-- <LuoFenMingInput 
  :modelValue="userName"
  @update:modelValue="userName=$event"
  /> -->
  <p>{{ userName }}</p>
</template>

<script setup  name="App" >
import { ref } from 'vue';
import LuoFenMingInput from './components/LuoFenMingInput.vue';
let userName = ref('罗分明')
</script>

本文来自 www.luofenming.com