vue组件双向绑定

在Vue中，双向绑定是一个核心概念，它允许数据在视图（View）和组件的状态（或数据模型）之间自动同步。这种机制主要通过Vue的v-model指令来实现，但v-model实际上是一个语法糖，它背后依赖于.sync修饰符（在Vue 2.3.0+中引入，用于自定义组件的双向绑定，但在Vue 3中被移除，因为推荐使用v-model的自定义模型绑定方式）或者更基础的v-bind（用于绑定数据到子组件的props）和v-on（或@，用于监听子组件的事件）来实现。

使用v-model实现双向绑定

对于Vue的内置组件（如<input>, <select>, <textarea>等），v-model提供了非常方便的双向绑定功能。例如：

<template>
  <div>
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
  </div>
</template>

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

在这个例子中，message数据属性被绑定到<input>元素的value属性上，并且当<input>的值发生变化时，message也会自动更新，这就是双向绑定的效果。

自定义组件的双向绑定

对于自定义组件，Vue 2.2.0+允许你使用.sync修饰符来实现类似v-model的双向绑定效果，但Vue 3推荐使用自定义v-model的方式。

Vue 2中使用.sync修饰符

Vue 2.3.0+引入了.sync修饰符，它可以简化子组件更新父组件传入的prop的流程。但请注意，.sync并不是真正的双向绑定，它只是语法糖，用于$emit一个update:myPropName事件。

<!-- 子组件 -->
<template>
  <div>
    <button @click="$emit('update:title', newTitle)">Change title</button>
  </div>
</template>

<script>
export default {
  props: ['title'],
  data() {
    return {
      newTitle: 'New title'
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component :title.sync="parentTitle"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentTitle: 'Old title'
    }
  }
}
</script>

Vue 3中的自定义v-model

在Vue 3中，.sync修饰符被移除了，推荐使用自定义v-model的方式来实现双向绑定。你可以通过指定modelValue作为prop名，并监听update:modelValue事件来实现。

<!-- 子组件 -->
<template>
  <div>
    <button @click="emitTitleUpdate">Change title</button>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  methods: {
    emitTitleUpdate() {
      this.$emit('update:modelValue', 'New title');
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component v-model="parentTitle"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentTitle: 'Old title'
    }
  }
}
</script>

在这个例子中，v-model在父组件中被用作modelValue的简写，并且监听update:modelValue事件来更新parentTitle。这是Vue 3中推荐的自定义组件双向绑定的方式。