vue组件实现双向绑定

使用 v-model 指令

Vue 提供了 v-model 指令实现表单元素与数据的双向绑定。例如输入框：

<input v-model="message">
<p>{{ message }}</p>

v-model 会自动将输入框的值与 message 数据属性同步。

自定义组件的双向绑定

自定义组件需通过 model 选项和 $emit 实现类似功能：

1. 定义 model 选项：

   export default {
     model: {
       prop: 'value',  // 绑定的属性名
       event: 'input'  // 触发的事件名
     },
     props: ['value']
   }

2. 触发事件更新父组件：
   在子组件内部通过 $emit 触发事件：

   this.$emit('input', newValue);

3. 父组件中使用 v-model：

   <custom-input v-model="parentData"></custom-input>

使用 .sync 修饰符

Vue 支持通过 .sync 修饰符实现多个属性的双向绑定：

1. 子组件触发更新：

   this.$emit('update:propName', newValue);

2. 父组件绑定：

   <child-component :propName.sync="parentData"></child-component>

手动实现绑定（适用于复杂场景）

结合 :value 和 @input 手动控制数据流：

<custom-input 
  :value="data" 
  @input="data = $event">
</custom-input>

子组件内部通过 props 接收 value 并触发 input 事件。

注意事项

• 单向数据流是 Vue 的核心原则，双向绑定应谨慎使用。
• 复杂场景推荐使用 Vuex 或 Pinia 管理状态。
• 自定义组件中，v-model 默认对应 value 属性和 input 事件，可通过 model 选项修改。