###
Vue3 中通过 `v
-model` 实现双向绑定并替代
Props 的方法
在
Vue3 中，`v
-model` 是一种简洁的方式来实现组件之间的双向绑定。它不仅可以用于简单的父子组件通信，还可以扩展到多个自定义事件和属性的绑定场景。
以下是基于
Vue3 Composition API 和 TypeScript 的具体实现方式：
#### 自定义 `v
-model` 替代单个 Prop 的双向绑定
当父组件需要控制子组件的状态时，可以通过 `v
-model` 来代替传统的单一 `prop` 和 `$emit` 方式。以下是一个基本示例：
```
vue
<!
-- 子组件 ChildComponent
.vue -->
<template>
<input :value="
modelValue" @input="$emit('update:
modelValue', $event
.target
.value)" />
</template>
<script setup lang="ts">
define
Props({
modelValue: {
type: String,
required: true,
},
});
const emit = defineEmits(['update:
modelValue']);
</script>
```
在这个例子中，`
modelValue` 被用来接收来自父组件的
数据，并通过监听输入框的变化触发更新事件[^1]。
---
#### 父组件调用子组件并通过 `v
-model` 进行双向绑定
父组件可以像下面这样简单地
使用 `v
-model` 属性来完成状态同步：
```
vue
<!
-- 父组件 ParentComponent
.vue -->
<template>
<ChildComponent v
-model="parentData" />
<p>Parent Data: {{ parentData }}</p>
</template>
<script setup lang="ts">
import { ref } from '
vue';
import ChildComponent from '
./ChildComponent
.vue';
const parentData = ref('Initial Value');
</script>
```
这里的关键在于 `v
-model` 将自动映射为 `
modelValue` 和 `update:
modelValue`，从而实现了父子组件间的双向绑定[^4]。
---
#### 扩展：支持多个 `v
-model` 绑定
如果希望在一个组件上同时维护多个独立的状态，则可以利用
Vue3 提供的多 `v
-model` 功能。例如，在表单中有两个字段分别对应用户名和密码的情况下，可以用如下形式处理：
##### 子组件 (Multi
ModelExample
.vue)
```
vue
<template>
<div>
<label>User Name:</label>
<input :value="userName" @input="$emit('update:userName', $event
.target
.value)" />
<br /><br />
<label>Password:</label>
<input :value="password" @input="$emit('update:password', $event
.target
.value)" />
</div>
</template>
<script setup lang="ts">
define
Props({
userName: {
type: String,
required: true,
},
password: {
type: String,
required: true,
},
});
// 定义 emits 对应于 update:xxx 形式的事件名
const emit = defineEmits(['update:userName', 'update:password']);
</script>
```
上述代码展示了如何让同一个组件接受两个不同的 `v
-model` 输入[^3]。
##### 父组件调用
```
vue
<template>
<Multi
ModelExample v
-model:user
-name="username" v
-model:password="pwd" />
<p>Username: {{ username }} | Password: {{ pwd }}</p>
</template>
<script setup lang="ts">
import { ref } from '
vue';
import Multi
ModelExample from '
./Multi
ModelExample
.vue';
const username = ref('');
const pwd = ref('');
</script>
```
注意这里的语法变化——对于非默认模型名称的情况，需显式指定前缀 `v
-model:` 并附加实际参数的名字。
---
### 总结
以上介绍了两种主要的应用模式：一是标准的单向 `v
-model`；二是更灵活的支持多字段绑定的形式。这些技术能够显著简化开发流程，减少手动管理复杂性的需求。
本文探讨了在Vue中为什么不推荐将props与v-model一起使用，主要原因是这违反了数据单向流的原则，可能导致父组件的数据意外被子组件修改，从而引起状态管理混乱。建议遵循最佳实践，保持组件间数据流动的清晰和可控。
扫一扫
7183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
