vue2中自定义组件双向绑定的方式

1 vue2中v-model

1.1默认情况

默认情况下，自定义组件中的 v-model 会：

1. 将 value 作为 prop 传入组件

2. 监听组件的 input 事件来更新值

<!-- 父组件使用方式 -->
<template>
  <div>
    <CustomInput v-model="message" />
    <p>父组件中的值: {{ message }}</p>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue'

export default {
  components: { CustomInput },
  data() {
    return {
      message: ''
    }
  }
}
</script>

<!-- 子组件 CustomInput.vue -->
<template>
  <div>
    <input
      type="text"
      :value="value"  <!-- 接收 value prop -->
      @input="$emit('input', $event.target.value)"  <!-- 触发 input 事件 -->
    />
  </div>
</template>

<script>
export default {
  props: ['value']  // 必须声明 value prop
}
</script>

1.2 自定义 model 选项

<!-- 子组件 CustomCheckbox.vue -->
<template>
  <div>
    <input
      type="checkbox"
      :checked="checked"  <!-- 使用 checked 而非 value -->
      @change="$emit('change', $event.target.checked)"  <!-- 触发 change 事件 -->
    />
  </div>
</template>

<script>
export default {
  model: {
    prop: 'checked',  // 指定 prop 名
    event: 'change'   // 指定事件名
  },
  props: ['checked']  // 必须声明对应的 prop
}
</script>

使用注意事项

1. 必须声明 prop：组件中必须显式声明用于 v-model 的 prop

2. 必须触发事件：在需要更新值时，必须通过 $emit 触发相应的事件

3. 单一性：一个组件上只能有一个 v-model

4. 修饰符处理：如果需要支持 .trim 等修饰符，需要在组件内部手动处理

2 vue2中sync修饰符

<template>
  <div>
    <!-- 使用 .sync 修饰符 -->
    <ChildComponent :title.sync="pageTitle" />
    <p>父组件中的 title: {{ pageTitle }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      pageTitle: '初始标题'
    }
  }
}
</script>

<template>
  <div>
    <input 
      type="text"
      :value="title"
      @input="$emit('update:title', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  props: ['title']  // 必须声明 title prop
}
</script>

与 v-model 的区别

1. 默认 prop 名：

   • v-model 默认使用 value prop

   • .sync 使用你指定的 prop 名

2. 事件名：

   • v-model 默认使用 input 事件

   • .sync 使用 update:propName 事件

3. 多个绑定：

   • 一个组件只能有一个 v-model

   • 可以有多个 .sync 绑定

3  vue3中v-model

3.1 默认情况

<com-a v-model="count"></com-a>
<!-- 等价 -->
<com-a :modelValue="count" @update:modelValue="count=$event"></com-a>

3.2 自定义model选项

<com-a v-model:msg="str"></com-a>
<!-- 等价 -->
<com-a :msg="str" @update:msg="str=$event"></com-a>

4  vue3不再支持 .sync 语法