###
Vue 中 `
model`
和 `v
-model` 的
区别
在
Vue.js 中，`
model` 是一种选项配置项，而 `v
-model` 则是一个指令。它们的作用虽然都涉及数据的双向绑定，但在实际使用场景
和功能上有显著的不同。
#### 1. **`
model` 配置**
`
model` 是
Vue 提供的一个组件选项，用于自定义子组件与父组件之间的同步方式。默认情况下，`v
-model` 在子组件中会监听名为 `value` 的 prop 并触发 `input` 事件来更新父级的数据。然而，通过设置 `
model` 选项，可以改变这种行为，指定不同的 prop 名称以及对应的事件名称[^1]。
例如，在
Vue 2 或
Vue 3 中可以通过如下代码来自定义模型：
```javascript
Vue.component('custom
-input', {
model: {
prop
: 'checked',
event
: 'change'
},
props
: ['checked'],
template
: `
<input
type="checkbox"
:checked="checked"
@change="$emit('change', $event.target.checked)"
>
`
});
```
在这个例子中，`v
-model` 将不再绑定到默认的 `value` 属性，而是绑定到了 `checked` 属性，并且触发的是 `change` 而不是 `input` 事件[^1]。
---
####
2. **`v
-model` 指令**
`v
-model` 是
Vue 提供的一种语法糖，简化了父子组件之间基于特定属性
和事件的双向通信过程。其实现原理本质上是结合了 `v
-bind`
和 `v
-on` 来完成数据的单向流动
和事件响应机制[^3]。
对于普通的输入框来说，`v
-model` 实际上相当于以下代码：
```html
<input
v
-bind
:value="msg"
v
-on
:input="msg = $event.target.value"
>
```
因此，当我们在模板中写 `<input v
-model="msg">` 时，实际上是在告诉
Vue 自动处理这个输入框的值绑定及其变更事件[^3]。
而在
Vue 3 中，`v
-model` 变得更加灵活，支持多个命名的 `v
-model` 绑定，这使得复杂表单的设计变得更加直观
和高效[^
2]。比如下面的例子展示了如何在一个组件中同时管理多个状态：
```html
<template>
<child
-component
v
-model:title="bookTitle"
v
-model:author="bookAuthor"
></child
-component>
</template>
<script>
export default {
data() {
return {
bookTitle
: '',
bookAuthor
: ''
};
}
};
</script>
```
这里分别绑定了 `title`
和 `author` 两个独立的状态给子组件，而不是像以前那样仅限于单一的 `value`。
---
#### 总结对比
| 特性 | `
model` | `v
-model` |
|
-----------------|
----------------------------------|
---------------------------------|
| 类型 | 组件选项 | 模板指令 |
| 主要用途 | 定义子组件接收 Prop
和发出 Event 的规则 | 简化父组件与子组件间的数据交互 |
| 默认行为 | 基于 `value`
和 `input` | 动态绑定目标值并监听其变化 |
| 是否可扩展 | 支持更改默认 Prop
和 Event 名称 |
Vue 3 中新增多字段支持 |
---
### 示例代码展示
以下是一段完整的示例，演示了如何利用 `
model` 修改默认行为并与 `v
-model` 结合使用的案例：
```html
<div id="app">
<!
-- 使用自定义的 checked
-->
<custom
-checkbox v
-model="isChecked"></custom
-checkbox>
<p>Checkbox is {{ isChecked ? 'checked'
: 'unchecked' }}</p>
</div>
<script>
Vue.component('custom
-checkbox', {
model: {
prop
: 'checked',
event
: 'change'
},
props
: ['checked'],
template
: `
<label><input
type="checkbox"
:checked="checked"
@change="$emit('change', $event.target.checked)">
Custom Checkbox
</label>`
});
new
Vue({
el
: '#app',
data
: {
isChecked
: false
}
});
</script>
```
此代码片段清楚地说明了 `
model` 如何调整 `v
-model` 的工作逻辑[^1]。
---
本文详细介绍了Vue中v-bind:model的用法，指出它是单向数据流的一种表现，用于传递数据到子组件。然而，v-model作为内置的双向绑定特性，允许子组件直接修改父组件的状态，但仅限于引用类型的值。理解这一区别对于掌握Vue的响应式系统至关重要。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
