1. input 中的 v-model
<!-- my-input.vue -->
<!-- props：value值必須用modelValue命名 -->
<!-- emits：方法必須用update:modelValue命名 -->
<script setup>
const props = defineProps({
modelValue: String,
});
let emits = defineEmits(["update:modelValue"]);
const updateValue = (event) => {
emits("update:modelValue", event.target.value);
};
</script>
<template>
<div>
<input :value="props.modelValue" @input="updateValue" />
<span>子組件：{{ props.modelValue }}</span>
</div>
</template><my-input v-model="value"></my-input>2. naive-ui 組件二次封裝 v-model
<!-- my-input.vue -->
<!-- props：value值必須用modelValue命名 -->
<!-- emits：方法必須用update:modelValue命名 -->
<script setup>
import { NInput } from "naive-ui";
const props = defineProps({
modelValue: String,
});
let emits = defineEmits(["update:modelValue"]);
// 差別在這，直接value就是改變的值
const updateValue = (value) => {
emits("update:modelValue", value);
};
</script>
<template>
<div>
<n-input :value="props.modelValue" @input="updateValue"></n-input>
<span>子組件：{{ props.modelValue }}</span>
</div>
</template><my-input v-model="value"></my-input>文章來源地址http://www.zghlxwxcb.cn/news/detail-733130.html
文章來源：http://www.zghlxwxcb.cn/news/detail-733130.html
到了這里，關(guān)于vue3 系列：自定義 v-model的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
