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>
相关推荐
前端小巷子几秒前
浏览器的同源策略与跨域问题
前端·面试·浏览器
江城开朗的豌豆几秒前
Vuex中mutations和actions的那些事儿:为啥非要分家?
前端·javascript·vue.js
Endeavour_T8 分钟前
ECharts图表怎么做自适应?
前端·echarts
bo521008 分钟前
浏览器缓存优先级
前端·面试·浏览器
namehu8 分钟前
浏览器中的扫码枪:从需求到踩坑再到优雅解决
前端·react.js
opbr10 分钟前
🚫🔨 不用重构!教你用 Vue3 + TSX 🧹优雅收纳后台页面一堆操作按钮
前端·vue.js
G等你下课15 分钟前
使用 Cookie 实现登录登出功能案例
前端·后端
西瓜树枝20 分钟前
antd vue全局自定义样式前缀实践
前端·vue.js
前端进阶者21 分钟前
地图坐标系转换JS库
前端·javascript
蛙哇21 分钟前
Pinia 核心源码简易实现
前端