在 Vue.js 中，双向绑定是一种非常核心的特性，它允许数据的视图层（即 DOM）和 JavaScript 中的数据模型之间能够实时地、自动地保持同步。Vue.js 通过 v-model 指令来实现双向绑定。

基本用法

在 Vue.js 中，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>

在上面的例子中，<input> 元素的 v-model 被绑定到了 Vue 实例的 message 属性上。这意呀着，当用户在输入框中输入文本时，message 属性的值会自动更新为输入框中的值，同时，由于数据绑定，{{ message }} 也会实时显示更新后的值。

自定义组件的双向绑定

对于自定义组件，Vue.js 不允许直接在组件上使用 v-model 来实现双向绑定。不过，你可以通过自定义 model 选项来指定 prop 和事件，使得组件能够使用 v-model。

<!-- 自定义组件 -->
<template>
  <input
    :value="value"
    @input="$emit('update:modelValue', $event.target.value)"
  >
</template>

<script>
export default {
  props: ['value'],
  model: {
    prop: 'value',
    event: 'update:modelValue'
  }
}
</script>

<!-- 使用自定义组件 -->
<template>
  <custom-input v-model="someData"></custom-input>
</template>

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

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      someData: ''
    }
  }
}
</script>

在上面的例子中，自定义组件 <custom-input> 通过 value prop 接收外部数据，并在内部输入变化时通过 $emit 触发 update:modelValue 事件，来通知父组件更新绑定的数据 someData。通过在组件中设置 model 选项，使得我们可以像使用原生表单元素一样，在自定义组件上使用 v-model。

结论

Vue.js 的双向绑定功能通过 v-model 指令提供，既适用于原生表单元素，也适用于自定义组件（通过 model 选项）。这使得在 Vue.js 应用中维护数据状态和视图同步变得非常简单和直观。