当前位置：首页 > news >正文

组件之间的双向绑定：v-model

news 2025/6/22 16:47:43

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

在Vue中，组件之间的双向绑定通常是通过使用 v-model 指令来实现的。在Vue3中，v-model 的使用方式有所变化，支持更灵活的自定义模型。

父组件向子组件传递数据

父组件可以通过 v-model 将数据传递给子组件，子组件通过 props 接收这些数据。

父组件

<template>
<ChildComponent v-model="parentData" />
</template><script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';export default {
components: {
ChildComponent
},
setup() {
const parentData = ref('Hello from parent');
return { parentData };
}
};
</script>

子组件

<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template><script>
export default {
props: {
modelValue: String // 注意这里使用的是 'modelValue' 而不是 'value'
},
emits: ['update:modelValue']
};
</script>

子组件向父组件传递数据

子组件可以通过 $emit 方法触发一个事件来更新父组件中的数据。

子组件

<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template><script>
export default {
props: {
modelValue: String
},
emits: ['update:modelValue']
};
</script>

父组件

<template>
<ChildComponent v-model="parentData" />
</template><script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';export default {
components: {
ChildComponent
},
setup() {
const parentData = ref('Hello from parent');
return { parentData };
}
};
</script>

自定义 `v-model` 的参数

Vue3 允许自定义 v-model 使用的 prop 和事件名。

父组件

<template>
<CustomInput v-model="customValue" />
</template><script>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';export default {
components: {
CustomInput
},
setup() {
const customValue = ref('');
return { customValue };
}
};
</script>

子组件

<template>
<input :value="customProp" @input="$emit('customUpdate', $event.target.value)">
</template><script>
export default {
props: {
customProp: String // 自定义 prop 名称
},
emits: ['customUpdate'] // 自定义事件名称
};
</script>