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事件来更新父组件的数据。这样就实现了自定义组件的双向数据绑定。