###
使用 `v
-model` 实现
Vue3 组件中的双向数据绑定
#### 基本概念
在
Vue3 中，`v
-model` 是一种用于创建基于表单输入、多选框以及下拉列表等元素上的双向数据绑定的简洁方式。它本质上是一个语法糖，简化了 `$emit(&#
39;update:modelValue&#
39;, newValue)` 和接收父级传递的数据作为 prop 的过程[^1]。
#### 单个属性的双向绑定
对于简单的场景，默认情况下 `v
-model` 将会监听名为 `modelValue` 的 props 并且发出带有新值的事件 `update:modelValue` 来更新父
组件的状态：
```html
<!
-- 子
组件 -->
<template>
<input :value="modelValue" @input="$emit(&#
39;update:modelValue&#
39;, $event
.target
.value)" />
</template>
<script setup>
import { defineProps } from &#
39;
vue&#
39;;
const props = defineProps([&#
39;modelValue&#
39;]);
</script>
```
```html
<!
-- 父
组件 -->
<MyInput v
-model="parentData"/>
```
这里展示了如何在一个自定义 `<MyInput>`
组件里应用 `v
-model` 进行基本的双向绑定操作[^4]。
#### 多个属性的双向绑定
当涉及到更复杂的交互需求时，比如想要在同一
组件内处理多个可编辑字段，则可以通过指定不同的参数名来扩展默认行为:
```html
<!
-- 子
组件 -->
<template>
<div>
<input :value="firstName" @input="$emit(&#
39;update:firstName&#
39;, $event
.target
.value)">
<input :value="lastName" @input="$emit(&#
39;update:lastName&#
39;, $event
.target
.value)">
</div>
</template>
<script setup>
import { defineProps } from &#
39;
vue&#
39;;
const props = defineProps({
firstName: String,
lastName: String
});
</script>
```
```html
<!
-- 父
组件 -->
<MyInputs
v
-model:firstName="first"
v
-model:lastName="last"
/>
```
此例子说明了怎样利用
命名空间特性让同一个子
组件支持两个独立变量之间的同步变化[^5]。
#### 新增功能：
使用宏函数 `defineModel()`
从
Vue 3.4 版本起引入了一个新的编译器宏——`defineModel()` ，这使得开发者能够更加方便地封装具有内置模型逻辑的基础 HTML 表单控件。该方法允许直接返回一个对象形式的结果给模板层面上
使用的 `v
-model` 属性[^
3]:
```javascript
// 子
组件脚本部分
<script setup>
import { ref, defineModel } from &#
39;
vue&#
39;
let model = defineModel()
let internalState = ref(model)
function handleInput(event){
const newVal = event
.target
.value;
internalState
.value = newVal; // 更新内部状态
model = newVal; // 同步外部模型
}
</script>
```
以上代码片段解释了通过 `defineModel()` 方法可以在不显式声明 emit 或者 props 的前提下完成相同的功能，并保持良好的解耦合度。
文章介绍了在Vue3项目中如何进行组件的模块化管理，通过在一个js文件中导入并导出多个组件，如header、body和footer，然后在项目中使用命名空间导入这些组件。这种方式使得组件之间的关系更加清晰，特别是在使用setup语法的情况下。
扫一扫
720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
