理解 Vue 3.4 中的 defineModel() 宏-CSDN博客

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

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

<!-- Child.vue -->
<script setup>
const model = defineModel()


function update() {
  model.value++
}
</script>


<template>
  <div>Parent bound v-model is: {{ model }}</div>
</template>

父组件可以用 v-model 绑定一个值：

<!-- Parent.vue -->
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'


const msg = ref(0)
</script>


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

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

1.它的 .value 和父组件的 v-model 的值同步；2.当它被子组件变更了，会触发父组件绑定的值一起更新。

这意味着你也可以用 v-model 把这个 ref 绑定到一个原生 input 元素上，在提供相同的 v-model 用法的同时轻松包装原生 input 元素：

<script setup>
const model = defineModel()
</script>


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

底层机制

defineModel 是一个便利宏。编译器将其展开为以下内容：

1.一个名为 modelValue 的 prop，本地 ref 的值与其同步；2.一个名为 update:modelValue 的事件，当本地 ref 的值发生变更时触发。

在 3.4 版本之前，你一般会按照如下的方式来实现上述相同的子组件：

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

然后，父组件中的 v-model="modelValue" 将被编译为：

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

如你所见，这显得冗长得多。然而，这样写有助于理解其底层机制。

因为 defineModel 声明了一个 prop，你可以通过给 defineModel 传递选项，来声明底层 prop 的选项：

// 使 v-model 必填
const model = defineModel({ required: true })


// 提供一个默认值
const model = defineModel({ default: 0 })

v-model 的参数

组件上的 v-model 也可以接受一个参数：

<script>
import MyComponent from './MyComponent.vue'


export default {
  components: { MyComponent },
  data() {
    return {
      bookTitle: 'v-model argument example'
    }
  }
}
</script>


<template>
  <h1>{{ bookTitle }}</h1>
  <MyComponent v-model:title="bookTitle" />
</template>

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

<!-- MyComponent.vue -->
<script setup>
const title = defineModel('title')
</script>


<template>
  <input type="text" v-model="title" />
</template>

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

const title = defineModel('title', { required: true })

3.4 之前的用法

<!-- MyComponent.vue -->
<script setup>
defineProps({
  title: {
    required: true
  }
})
defineEmits(['update:title'])
</script>


<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  />
</template>

多个 v-model 绑定

利用刚才在 v-model 参数小节中学到的指定参数与事件名的技巧，我们可以在单个组件实例上创建多个 v-model 双向绑定。

组件上的每一个 v-model 都会同步不同的 prop，而无需额外的选项：

<script setup>
import { ref } from 'vue'
import UserName from './UserName.vue'


const first = ref('John')
const last = ref('Doe')
</script>


<template>
  <h1>{{ first }} {{ last }}</h1>
  <UserName
    v-model:first-name="first"
    v-model:last-name="last"
  />
</template>

UserName.vue

<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>


<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>

3.4 之前的用法

<script setup>
defineProps({
  firstName: String,
  lastName: String
})


defineEmits(['update:firstName', 'update:lastName'])
</script>


<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>