vue3.x系列之v-model的使用技巧及面试高频问题

在前面的一篇文章中，我们分析了v-model在v2版中的用法。这次我们分析下在v3中的使用技巧。学习之前，请忘记之前的v2语法，现在的更加简洁易用。

组件上面的v-model

在v3.4版之前的写法如下

子组件Child.vue

js 复制代码

<!-- Child.vue -->
<script setup>
defineProps({
  modelValue: {
    type: Number,
    default: 0
  }
});

const emits = defineEmits(["update"]);
//function update() {
//  emits("update:modelValue", modelValue + 1);
//}
</script>

<template>
  <div>Parent bound v-model is: {{ modelValue }}</div>
  <button @click="$emit('update:modelValue',modelValue + 2)">Increment</button>
</template>

父组件

html 复制代码

<Child v-model="count" />

上面的写法大家应该都很熟悉，应该也会感觉很繁琐。

v3.4版本之后的写法

推荐的实现方式是使用 defineModel() 宏
修改子组件，父组件保持不变

js 复制代码

<!-- Child.vue -->
<script setup>
const model = defineModel();
function update() {
  model.value++;
}
</script>

<template>
  <div>Parent bound v-model is: {{ model }}</div>
  <button @click="update">Increment</button>
</template>

父组件代码

js 复制代码

<template>
  <div>
    <h1>VModelView</h1>
    <p>parent count: {{ count }}</p>
    <Child v-model="count" />
  </div>
</template>

<script setup>
import Child from "@/components/Child.vue";
import { ref } from "vue";
const count = ref(0);
</script>

可以观察到，实现了一样的效果，代码也简洁了很多。

defineModel() 返回的值是一个 ref。它可以像其他 ref 一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用

在子组件中直接更改了这个model的value值,
父组件中的count与组件中的model.value保持了联动

自定义我们的输入组件

父组件的

js 复制代码

<template>
  <div>
    <h1>VModelView</h1>
    <p>parent count: {{ count }}</p>
    <Child v-model="count" />
    <br />
    <p>parent msg:{{ msg }}</p>
    <MyInput v-model="msg" />
  </div>
</template>

<script setup>
import Child from "@/components/Child.vue";
import MyInput from "@/components/MyInput.vue";
import { ref } from "vue";
const count = ref(0);
const msg = ref("hello world");
</script>

子组件

js 复制代码

<template>
  <p>child msg: {{ inputModel }}</p>
  <input v-model="inputModel" />
</template>

<script setup>
const inputModel = defineModel();
</script>

这样我们就很简洁的封装了一个自定义的单行文本组件，自己加点样式美化即可。

v-model传参

html 复制代码

 <MyInput v-model:title="msg" v-model="msg2" />

js 复制代码

const msg = ref("abc");
const msg2 = ref("hello");

子组件中defineModel必须接收这个参数，否则不会显示对应的数据，无参可以不用传。

html 复制代码

<template>
  <p>child msg: {{ inputModel }}</p>
  <input v-model="inputModel" />
  <br />
  <input v-model="inputModel2" />
</template>

<script setup>
const inputModel = defineModel("title");
const inputModel2 = defineModel();
</script>