[vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法

在Vue中，v-model是一个语法糖，它可以帮助我们更简单地创建双向绑定。在Vue 2和Vue 3中，v-model的实现方式略有不同。

Vue 2中的v-model

在Vue 2中，v-model实质上是一个语法糖，它被解析为:value和@input的组合。

<!-- 父组件 -->
<template>
  <ChildComponent v-model="message" />
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>
 
<!-- 子组件 -->
<template>
  <input :value="value" @input="updateValue($event.target.value)" />
</template>
 
<script>
export default {
  props: ['value'],
  methods: {
    updateValue(value) {
      this.$emit('input', value);
    }
  }
}
</script>

Vue 3中的v-model

在Vue 3中，v-model的实现更为简洁，可以直接通过自定义v-model的prop和event来实现。

<!-- 父组件 -->
<template>
  <ChildComponent v-model="message" />
</template>
 
<script>
import { ref } from 'vue';
export default {
  setup() {
    const message = ref('');
    return { message };
  }
}
</script>
 
<!-- 子组件 -->
<template>
  <input :value="modelValue" @input="updateValue($event.target.value)" />
</template>
 
<script>
export default {
  props: {
    modelValue: String,
  },
  emits: ['update:modelValue'],
  methods: {
    updateValue(value) {
      this.$emit('update:modelValue', value);
    }
  }
}
</script>

在Vue 3中，我们可以通过v-model的prop和event进行自定义，而不再局限于value和input。

其他双向绑定的写法

1. 使用\`.sync修饰符：

<!-- 父组件 -->
<template>
  <ChildComponent :message.sync="parentMessage" />
</template>
 
<script>
export default {
  data() {
    return {
      parentMessage: ''
    }
  }
}
</script>
 
<!-- 子组件 -->
<template>
  <input :value="message" @input="$emit('update:message', $event.target.value)">
</template>
 
<script>
export default {
  props: ['message'],
}
</script>

2. 使用事件发射的方式：

<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMessage" @update-message="updateParentMessage" />
</template>
 
<script>
export default {
  data() {
    return {
      parentMessage: ''
    }
  },
  methods: {
    updateParentMessage(value) {
      this.parentMessage = value;
    }
  }