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

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

article 2025/2/24 18:13:52

在 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: {  // 必须命名为 value
      type: 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: {  // 接收对象类型的 value
      type: 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>