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

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>