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>
相关推荐
mCell20 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip20 小时前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript