在 Vue.js 中，双向绑定是一种非常核心的特性，它允许数据的视图层（即 DOM）和 JavaScript 中的数据模型之间能够实时地、自动地保持同步。Vue.js 通过 `v-model` 指令来实现双向绑定。 ### 基本用法 在 Vue.js 中，`v-model` 指令在表单输入和应用状态之间创建双向数据绑定。这意味着当用户在输入字段中输入时，绑定的数据模型会自动更新，反之亦然。 ```html ``` 在上面的例子中，`` 元素的 `v-model` 被绑定到了 Vue 实例的 `message` 属性上。这意呀着，当用户在输入框中输入文本时，`message` 属性的值会自动更新为输入框中的值，同时，由于数据绑定，`{{ message }}` 也会实时显示更新后的值。 ### 自定义组件的双向绑定 对于自定义组件，Vue.js 不允许直接在组件上使用 `v-model` 来实现双向绑定。不过，你可以通过自定义 `model` 选项来指定 prop 和事件，使得组件能够使用 `v-model`。 ```html ``` 在上面的例子中，自定义组件 `` 通过 `value` prop 接收外部数据，并在内部输入变化时通过 `$emit` 触发 `update:modelValue` 事件，来通知父组件更新绑定的数据 `someData`。通过在组件中设置 `model` 选项，使得我们可以像使用原生表单元素一样，在自定义组件上使用 `v-model`。 ### 结论 Vue.js 的双向绑定功能通过 `v-model` 指令提供，既适用于原生表单元素，也适用于自定义组件（通过 `model` 选项）。这使得在 Vue.js 应用中维护数据状态和视图同步变得非常简单和直观。