vue3的v-model

基本用法

v-model可以在组件上实现双向绑定

从 Vue 3.4 开始,推荐的实现方式是使用defineModel()宏:

vue 复制代码
<script setup>
const model = defineModel()
</script>

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

在子组件中使用defineModel声明一个model变量,在模板中使用v-model绑定这个变量

vue 复制代码
// App.vue
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <Child v-model="msg" />
</template>

在父组件声明一个响应变量msg,再用v-model绑定msg,这样msg的值传给了子组件

效果:在子组件中修改model的值,父组件的msg也随之变化。

底层原理

vue 复制代码
<script setup>
const model = defineModel()
</script>

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

可以拆解成由defineProps()和defineEmit()的组合

vue 复制代码
<!-- Child.vue -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="props.modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>
vue 复制代码
// App.vue
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <Child v-model="msg" />
</template>

被拆解成

vue 复制代码
<!-- APP.vue -->
<Child
  :modelValue="msg"
  @update:modelValue="$event => (msg = $event)"
/>

在子组件中用props.modelValue接受父组件传来的msg的值,在模板中用:value进行响应式渲染。

当模板中input的value被修改的时候,使用emit中update:modelValue向父组件传value的值,然后父组件的msg的值被修改成value的值。

v-model的参数

在组件上的v-model可以接受一个参数:

vue 复制代码
// App.vue
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <Child v-model:title="msg" />
</template>

在子组件中,我们可以通过将字符串作为第一个参数传递给 defineModel() 来支持相应的参数。

vue 复制代码
<script setup>
const title = defineModel('title')
</script>

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

如果需要额外的 prop 选项,应该在 model 名称之后传递

js 复制代码
const title = defineModel('title', { required: true })
相关推荐
人工智能训练师3 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny073 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy4 小时前
css的基本知识
前端·css
昔人'4 小时前
css `lh`单位
前端·css
前端君5 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6146 小时前
Web前端面试题(2)
前端
知识分享小能手6 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队7 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光7 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军7 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite