Vue2 和 Vue3 中 v-model 实现组件间传值的差异

Vue2 和 Vue3 中 v-model 的差异

Vue.js 中的 v-model 指令允许在组件之间传递数据。在 Vue2 中，v-model 实现了一个单向数据流，这意味着子组件可以从父组件接收数据，但不能将数据传递回父组件。在 Vue3 中，v-model 实现了双向数据流，这意味着子组件既可以从父组件接收数据，也可以将数据传递回父组件。

Vue2 中 v-model 的实现

在 Vue2 中，v-model 的实现是通过一个名为 sync 的修饰符来实现的。sync 修饰符可以用于将子组件中的数据绑定到父组件中的数据。例如，以下代码演示了如何在 Vue2 中使用 sync 修饰符实现父子组件通信：

// 父组件
<template>
  <child-component v-model="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

// 子组件
<template>
  <input v-model="message">
</template>

<script>
export default {
  props: ['message'],
  emits: ['update:message']
}
</script>

在上面的代码中，父组件使用 v-model="message" 将 message 数据绑定到子组件中的 message 数据。当子组件中的 message 数据发生改变时，父组件中的 message 数据也会随之改变。

Vue3 中 v-model 的实现

在 Vue3 中，v-model 的实现不再使用 sync 修饰符，而是使用了一个新的语法糖。新的语法糖使得在 Vue3 中实现双向数据流更加容易。例如，以下代码演示了如何在 Vue3 中使用新的语法糖实现父子组件通信：

// 父组件
<template>
  <child-component v-model="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

// 子组件
<template>
  <input v-model="message">
</template>

<script>
export default {
  emits: ['update:message']
}
</script>

在上面的代码中，父组件使用 v-model="message" 将 message 数据绑定到子组件中的 message 数据。当子组件中的 message 数据发生改变时，父组件中的 message 数据也会随之改变。

如何在 Vue3 中实现双向数据流

在 Vue3 中，要实现双向数据流，只需要在子组件中使用 $emit 方法来触发 update:message 事件。例如，以下代码演示了如何在 Vue3 中实现双向数据流：

// 父组件
<template>
  <child-component v-model="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

// 子组件
<template>
  <input v-model="message">
</template>

<script>
export default {
  emits: ['update:message'],
  methods: {
    updateMessage(newValue) {
      this.$emit('update:message', newValue)
    }
  }
}
</script>

在上面的代码中，子组件在 updateMessage 方法中使用 $emit 方法触发了 update:message 事件，并将 newValue 作为参数传递给父组件。父组件接收到 update:message 事件后，会将 message 数据更新为 newValue。