Vue从入门到荒废-双向绑定

在 Vue 中，双向绑定（Two-Way Data Binding）允许数据在 数据源（JavaScript 数据） 和 视图（DOM） 之间自动同步。当数据变化时，视图自动更新；当用户操作视图时，数据也会被修改。这是通过 Vue 的 v-model 指令实现的。

双向绑定的核心原理

v-model 是语法糖，本质上是 v-bind（绑定数据到视图）和 v-on（监听视图事件更新数据）的组合。
例如，对 <input> 使用 v-model 等价于：

<input 
  :value="message" 
  @input="message = $event.target.value"
>

双向绑定的适用场景

1. 表单输入（如文本框、复选框、下拉框）。
2. 自定义组件需要与父组件同步数据时。

案例分析

1. 基础表单输入

<template>
  <div>
    <input v-model="text" placeholder="输入内容">
    <p>输入的内容：{{ text }}</p>
  </div>
</template>

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

• 效果：输入框内容变化时，text 数据同步更新，下方段落实时显示。

2. 复选框（Checkbox）

单个复选框绑定布尔值，多个复选框绑定数组：

<template>
  <div>
    <!-- 单个复选框 -->
    <input type="checkbox" v-model="isChecked">
    <label>是否同意协议</label>
    <p>状态：{{ isChecked ? '同意' : '不同意' }}</p>

    <!-- 多个复选框 -->
    <input type="checkbox" value="vue" v-model="skills">
    <label>Vue</label>
    <input type="checkbox" value="react" v-model="skills">
    <label>React</label>
    <p>已选技能：{{ skills }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false,
      skills: []
    }
  }
}
</script>

3. 单选按钮（Radio）

<template>
  <div>
    <input type="radio" value="male" v-model="gender">
    <label>男</label>
    <input type="radio" value="female" v-model="gender">
    <label>女</label>
    <p>性别：{{ gender }}</p>
  </div>
</template>

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

4. 下拉框（Select）

<template>
  <div>
    <select v-model="selectedCity">
      <option value="">请选择城市</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
    </select>
    <p>已选城市：{{ selectedCity }}</p>
  </div>
</template>

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

5. 自定义组件的双向绑定

父组件通过 v-model 与子组件同步数据：

<!-- 父组件 Parent.vue -->
<template>
  <div>
    <Child v-model="message" />
    <p>父组件接收的值：{{ message }}</p>
  </div>
</template>

<script>
import Child from './Child.vue';
export default {
  components: { Child },
  data() {
    return { message: 'Hello' }
  }
}
</script>

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

<script>
export default {
  props: ['modelValue'], // 默认接收 modelValue 属性
  emits: ['update:modelValue'] // 必须声明触发的事件
}
</script>

• 关键点：
  • 子组件通过 props 接收 modelValue。
  • 子组件通过 $emit('update:modelValue', newValue) 通知父组件更新数据。

6. 修饰符（Modifiers）

v-model 支持修饰符，用于处理特定场景：

1. .lazy：将 input 事件改为 change 事件（输入完成后同步）。

   <input v-model.lazy="text">
   

2. .number：将输入值转为数字类型。

   <input v-model.number="age" type="number">
   

3. .trim：自动去除首尾空格。

   <input v-model.trim="username">
   

双向绑定的注意事项

1. 性能影响
   频繁的输入操作（如实时搜索）可能触发大量更新，可结合 .lazy 或防抖优化。

2. 避免直接修改 props
   在自定义组件中，子组件不能直接修改父组件传递的 props，必须通过事件 ($emit) 更新。

3. 复杂对象绑定
   如果绑定的数据是对象，需确保对象是响应式的（Vue 无法检测到未声明的属性新增）。

双向绑定 vs 单向绑定

总结

• 双向绑定通过 v-model 简化了表单和组件间的数据同步，但需谨慎使用以避免数据流混乱。
• 核心应用场景：表单输入、自定义组件需要与父组件同步数据。
• 进阶技巧：修饰符（.lazy、.number）、自定义组件的 modelValue 和 update:modelValue 事件。