Vue3 custom component v-model principle analysis

1. v-model in input

<!-- 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 component secondary encapsulation 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>