vue3 自定义 v-model（无参数和带参数）【setup版】（两种方案）

朝阳392024-06-11 12:35

vue2 自定义 v-model 详见 https://sunshinehu.blog.csdn.net/article/details/136942322

vue3 自定义 v-model【方案一】

子组件 Child.vue

html 复制代码

<script setup>
defineProps(["modelValue"]);
const emits = defineEmits();
</script>

<template>
  <input
    type="text"
    :value="modelValue"
    @input="emits('update:modelValue', $event.target.value)"
  />
</template>

父组件

html 复制代码

<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，且可带参数

父组件

html 复制代码

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

子组件

html 复制代码

<script setup>
defineProps(["title", "msg"]);
const emits = defineEmits(["update:title", "update:msg"]);
</script>

<template>
  <input
    type="text"
    :value="title"
    @input="emits('update:title', $event.target.value)"
  />

  <input
    type="text"
    :value="msg"
    @input="emits('update:msg', $event.target.value)"
  />
</template>

vue3 自定义 v-model【方案二】推荐

html 复制代码

<!-- 组合式 API vue3.4+ -->
<script setup>
const model = defineModel()
</script>

<template>
	<input v-model="model">
</template>

defineModel() 返回的值是一个 ref

它的 .value 和父组件的 v-model 的值同步
当它被子组件变更时，会触发父组件绑定的值一起更新

v-model 带参数

以参数 "title" 为例

html 复制代码

<!-- 组合式 API vue3.4+ -->
<script setup>
const title = defineModel('title')
</script>

<template>
  <input type="text" v-model="title" />
</template>

父组件

html 复制代码

<MyComponent v-model:title="bookTitle" />