vue3 自定义组件 v-model 原理解析

1. input 中的 v-model

<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

<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>