Vue实现双向数据绑定

在Vue.js中，双向数据绑定是通过v-model指令实现的。v-model是Vue.js提供的一个语法糖，它能够在表单元素和组件上实现数据的双向绑定。

基本用法

假设我们有一个简单的输入框，我们希望输入框的值能够实时反映到Vue实例的数据中，并且当Vue实例的数据发生变化时，输入框的值也会自动更新。

<template>
  <div>
    <input v-model="message" placeholder="输入一些内容">
    <p>你输入的内容是: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

v-model="message"将输入框的值与Vue实例中的message属性进行了双向绑定。当用户在输入框中输入内容时，message的值会自动更新；反之，如果message的值在代码中被修改，输入框中的内容也会随之更新。

自定义组件的双向绑定

在自定义组件中，v-model同样可以实现双向数据绑定。Vue.js要求自定义组件通过model选项来定义v-model的行为。

<template>
  <div>
    <custom-input v-model="customMessage"></custom-input>
    <p>自定义组件的值是: {{ customMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customMessage: ''
    };
  }
};
</script>

在custom-input组件中：

<template>
  <input :value="value" @input="updateValue($event.target.value)">
</template>

<script>
export default {
  props: {
    value: String
  },
  methods: {
    updateValue(value) {
      this.$emit('input', value);
    }
  }
};
</script>

custom-input组件通过props接收父组件传递的value，并通过$emit触发input事件来更新父组件的数据。这样就实现了自定义组件的双向数据绑定。