效果如下
自定义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