###
Vue 父子组件 v
-model 双向绑定使用方法
在
Vue 中，
父子组件可以通过 `v
-model` 实现双向绑定。这种绑定机制允许
父组件和
子组件之间共享数据，并且当
任意一方的数据发生变化时，另一方也会同步更新。以下是实现方法的详细说明：
#### 1.
父组件的实现
父组件通过 `v
-model` 将一个变量
传递给
子组件。默认情况下，`v
-model` 的
值会被解析为
子组件的 `props` 中的 `value` 属性，并且当
子组件触发 `input` 事件时，
父组件会更新该变量。
```html
<template>
<div>
<!
-- 使用 v
-model 将 formData.value 绑定到
子组件 -->
<son v
-model="formData.value"></son>
<button @click="changeVal">点击变化 value</button>
</div>
</template>
<script>
import son from "./son.
vue";
export default {
components: { son },
name: "father",
data
() {
return {
formData: {} // 表单对象
};
},
watch: {
value
(val
) {
console.log
("
父组件看见的" + val
); // 监听
值的变化 [^1]
}
},
methods: {
changeVal
() {
this.formData.value = "
父组件事件改变了
传值"; // 修改 formData.value 的
值 [^1]
}
}
};
</script>
```
#### 2.
子组件的实现
子组件需要定义一个 `props` 来接收
父组件传递的
值（默认为 `value`），并通过 `$emit` 方法将更新后的
值传递回
父组件。
```html
<template>
<div>
<input v
-model="model.captchaValue" placeholder="请输入验证码" />
<button @click="changeCode">刷新验证码</button>
</div>
</template>
<script>
export default {
name: "YfCaptcha",
props: {
value: {
type: Object,
default: function
() {
return {};
}
}
},
data
() {
return {
model: { captchaValue: "", captchaKey: "" } // 定义模型对象 [^2]
};
},
created
() {
this.model = this.value; // 初始化模型对象 [^2]
this.changeCode
();
},
methods: {
changeCode
() {
this.model.captchaKey = uuid.v4
(); // 更新验证码
this.$emit
("input", this.model
); // 触发 input 事件，通知
父组件更新 [^2]
}
}
};
</script>
```
#### 3.
Vue 3 中的多
值绑定
在
Vue 3 中，`v
-model` 支持自定义修饰符，可以同时绑定多个
值。例如，可以绑定 `msg` 和 `otherValue` 两个
值。
```html
<template>
<div>
<Test v
-model="state.msg" v
-model:otherValue="state.otherValue"></Test>
</div>
</template>
<script setup lang="ts">
import { reactive, watch } from "
vue";
const state = reactive
({
msg: "",
otherValue: ""
}
);
watch
(
() => state.msg,
() => {
console.log
(state.msg, "外部数据"
); // 监听 msg 的变化 [^3]
},
{ deep: true }
);
watch
(
() => state.otherValue,
() => {
console.log
(state.otherValue, "其他数据"
); // 监听 otherValue 的变化 [^3]
},
{ deep: true }
);
</script>
```
#### 4. 注意事项
- 在
Vue 2 中，默认的 `v
-model` 绑定的是 `value` 属性和 `input` 事件。
- 如果需要绑定其他属性或事件，可以在
Vue 3 中使用修饰符（如 `v
-model:otherValue`）。
- 确保
子组件正确地通过 `$emit` 触发 `input` 事件以通知
父组件更新数据。
---
### 示例代码总结
以下是一个完整的
父子组件双向绑定示例：
```html
<!
-- 父组件 -->
<template>
<div>
<Child v
-model="parentData"></Child>
<p>
父组件数据：{{ parentData }}</p>
<button @click="updateParentData">更新
父组件数据</button>
</div>
</template>
<script>
import Child from "./Child.
vue";
export default {
components: { Child },
data
() {
return {
parentData: "初始
值"
};
},
methods: {
updateParentData
() {
this.parentData = "
父组件直接修改";
}
}
};
</script>
<!
-- 子组件 -->
<template>
<div>
<input v
-model="localValue" @input="updateValue" />
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
default: ""
}
},
data
() {
return {
localValue: this.value
};
},
watch: {
value
(newVal
) {
this.localValue = newVal;
}
},
methods: {
updateValue
() {
this.$emit
("input", this.localValue
); // 触发 input 事件 [^1]
}
}
};
</script>
```
---
本文深入探讨Vue框架中组件间的通信机制，包括父组件向子组件传递数据的方法，子组件如何向父组件发送事件，以及兄弟组件间如何通过中间媒介实现通信。通过具体实例，帮助开发者理解并掌握Vue组件间数据流动的技巧。
扫一扫
5716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
