vue3 组件响应式v-model 失效，实践踩坑，一文搞懂组件响应式原理，对初学者友好_vue3中v-model无法获取this.$emit('input')的值

前情提要

vue3的v-model已经有了变化，假如你还不知道其中细节，看完这篇文章你就完全明白了，我以踩坑的场景来进行解析。起因是在我的项目中需要一个输入框组件，这个组件用来根据输入异步查询系统内已有人员，而且在多个地方需要用到这个输入框，所以必须要封装成组件，但是我还是本着学习的态度认真的读完了官方文档相关的内容，结果问题还是出现了；

实战解析

首先我读了有关的内容比如这段官方文档；

有了官方文档的基础知识，我大概的了解了如果你想封装一个响应式组件，那么基础是你需要这样写：

<!-- CustomInput.vue -->
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>
1
2
3
4
5
6
7
8
9
10
11
12

这是个最基本的例子，我看完后感觉很简单，于是有了以下写法：

//father
<InputUser :modelValue="fatherValue"></InputUser>
//childe
<el-select v-model="modelValue">
        <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value" />
</el-select>

<script setup>
defineProps({
    modelValue: String,
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

这里我就简单列下dom可以说明问题就行，以上写法会导致双向绑定失败；因为vue3的组件v-model是有说法的，只有俩种写法是正确的，父组件处：

1. v-model=“item.value”
2. v-model:modelValue = “item.value” //注意之间使用:modelValue不可以