vue 中的 v-model详解

v-model 是 vue 的主要特性，双向绑定是响应式变量的核心。v-model 的简单原理就是数据监听加UI通知，如何在我们自己的组件中实现 v-model 呢？数据变更监听加父组件事件通知，如下，来自官网的一个例子

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

绑定props.modelValue
父组件使用 v-model 时会自动将父组件 v-model 对应的变量转换为子组件的一个属性（props） modelValue，子组件可以通过 Props 进行读取
数据变更时进行通知
通过 update:modelValue 通知父组件数据已经更新
父组件中进行调用

<!-- Parent.vue -->
<Child
  :modelValue="foo"
  @update:modelValue="$event => (foo = $event)"
/>

Vue3中的简化写法

可以看到 v-model 中我们需要定义数据监听和变更通知，为什么不能直接在子组件中使用 v-model 呢，这是由于 props 变量是单向的、只读的，子组件中不能更改。Vue3 提供了一个新的写法，通过 defineModel 定义 v-model 属性，如下：

<script setup>
const model = defineModel()
</script>
<template>
  <input v-model="model" />
</template>

v-model 自定义变量名

默认 v-model 对应变量名为 modelValue，在 vue3 我们也可以指定变量名，这样父组件可以传递多个 v-model 变量，如下：

<script setup>
const title = defineModel('title')
</script>
<template>
  <input type="text" v-model="title" />
</template>

父组件中调用时，需要制定变量名

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

总结

v-model 核心就是监听和通知，本文使用了官网的例子进行了简单的介绍，更多高级用法可以到官网进行学习。

到此这篇关于vue 中的 v-model的文章就介绍到这了,更多相关vue 中的 v-model内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！