vue2 自定义 v-model 详见 https://sunshinehu.blog.csdn.net/article/details/136942322
vue3 自定义 v-model【方案一】
子组件 Child.vue
<script setup>
defineProps(["modelValue"]);
const emits = defineEmits();
</script><template><inputtype="text":value="modelValue"@input="emits('update:modelValue', $event.target.value)"/>
</template>
父组件
<script setup>
import { ref } from "vue";
import Child from "./Child.vue";const msg = ref("");
</script><template><div>{{ msg }}<Child v-model="msg" /></div>
</template>
技术要点
vue3 中，若 v-model 未配置参数，则
- 父组件给子组件传入了名为
modelValue的 prop - 父组件监听了子组件的自定义事件
update:modelValue
v-model 带参数
vue3 支持多个v-model，且可带参数
父组件
<script setup>
import { ref } from "vue";
import Child from "./Child.vue";const title = ref("");
const msg = ref("");
</script><template><div><p>{{ title }}</p><p>{{ msg }}</p><Child v-model:title="title" v-model:msg="msg" /></div>
</template>
子组件
<script setup>
defineProps(["title", "msg"]);
const emits = defineEmits(["update:title", "update:msg"]);
</script><template><inputtype="text":value="title"@input="emits('update:title', $event.target.value)"/><inputtype="text":value="msg"@input="emits('update:msg', $event.target.value)"/>
</template>
vue3 自定义 v-model【方案二】推荐
<!-- 组合式 API vue3.4+ -->
<script setup>
const model = defineModel()
</script><template><input v-model="model">
</template>
defineModel() 返回的值是一个 ref
- 它的 .value 和父组件的 v-model 的值同步
- 当它被子组件变更时，会触发父组件绑定的值一起更新
v-model 带参数
以参数 “title” 为例
<!-- 组合式 API vue3.4+ -->
<script setup>
const title = defineModel('title')
</script><template><input type="text" v-model="title" />
</template>
父组件
<MyComponent v-model:title="bookTitle" />
)
