vue3 系列：自定义 v-model_vue3 自定义v-model-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_64684095/article/details/132753486

博客主要围绕前端开发中 v-model 的应用展开，介绍了 input 里的 v-model，以及 naive-ui 组件二次封装 v-model 的相关内容，涉及 Vue.js 和 JavaScript 技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>