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

在 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>

4. 注意事项

避免直接修改 prop：

• Vue 中 prop 是单向数据流，直接修改 this.value 会导致警告。应通过触发事件让父组件更新数据。

深拷贝问题：

• 若 prop 是对象或数组，直接赋值 localValue = this.value 会导致浅拷贝。需使用扩展运算符或
  JSON.parse(JSON.stringify()) 深拷贝。

性能优化：

• 频繁触发 input 事件可能影响性能，可通过防抖（debounce）或节流（throttle）优化。

总结
在 Vue 2 中，自定义组件的 v-model 实现依赖两个核心机制：

1. 接收 value prop：用于初始化组件内部状态。
2. 触发 input 事件：将新值传递回父组件。

通过 model 选项，可以灵活定义 prop 和事件名，适应不同场景需求。对于复杂数据类型，需谨慎处理数据的复制和更新，避免直接修改prop。

如果你有任何问题或想法，欢迎在评论区留言讨论。