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

如何在自定义组件中使用v-model实现双向绑定

news 2025/8/12 6:14:00

在 Vue 2 中，v-model 是双向数据绑定的语法糖，它默认将 value 作为 prop 传入组件，并通过监听 input 事件来更新父组件的数据。若要在自定义组件中实现 v-model 的双向绑定，需遵循以下步骤：
1. 基本实现：value + input 事件
自定义组件（ChildComponent.vue）

<template><input :value="value" @input="$emit('input', $event.target.value)">
</template><script>
export default {props: {value: {  // 必须命名为 valuetype: String,default: ''}}
};
</script>

父组件（ParentComponent.vue）

<template><ChildComponent v-model="message" /><p>父组件数据：{{ message }}</p>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },data() {return {message: 'Hello Vue 2'};}
};
</script>

原理：

v-model=“message” 等价于 :value=“message” @input=“message = $event”。
子组件通过 props.value 接收父组件传递的值。
子组件在输入时触发 $emit(‘input’, newValue)，更新父组件的 message。

2. 自定义 prop 和事件名（使用 model 选项）
如果不想使用默认的 value prop 和 input 事件，可以通过 model 选项自定义：

自定义组件（ChildComponent.vue）

<template><input :checked="checked" @change="$emit('change', $event.target.checked)">
</template><script>
export default {model: {prop: 'checked',   // 自定义 prop 名event: 'change'    // 自定义事件名},props: {checked: {        // 与 model.prop 一致type: Boolean,default: false}}
};
</script>

父组件（ParentComponent.vue）

<template><ChildComponent v-model="isChecked" /><p>是否选中：{{ isChecked }}</p>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },data() {return {isChecked: false};}
};
</script>

说明：

model 选项允许将 v-model 绑定到自定义的 prop（如 checked）和事件（如 change）。
父组件仍可直接使用 v-model，无需额外修改。

3. 处理复杂数据类型
若需要绑定对象或数组，直接在子组件中修改引用类型的 prop 可能导致副作用。推荐通过事件传递新值：

自定义组件（ObjectChild.vue）

<template><div><input v-model="localValue.name" @input="updateValue"><input v-model="localValue.age" @input="updateValue"></div>
</template><script>
export default {props: {value: {  // 接收对象类型的 valuetype: Object,default: () => ({})}},data() {return {localValue: { ...this.value }  // 复制 prop 到局部变量};},methods: {updateValue() {this.$emit('input', { ...this.localValue });  // 触发事件传递新对象}}
};
</script>

父组件（ParentComponent.vue）

<template><ObjectChild v-model="user" /><p>用户信息：{{ user }}</p>
</template><script>
import ObjectChild from './ObjectChild.vue';export default {components: { ObjectChild },data() {return {user: { name: 'Alice', age: 25 }};}
};
</script>