Vue.js 组件通信知识点总结

1. v-model 的工作原理

• 概念: v-model 是 Vue.js 中用于实现父组件与子组件之间的双向数据绑定的语法糖。
• 拆解:
  • v-model="dataModel" 等价于 :value="dataModel" 和 @input="dataModel = $event"。
  • 父组件将 dataModel 作为 prop 传递给子组件的 value。
  • 子组件通过 $emit('input', newValue) 事件将 newValue 传递给父组件，更新 dataModel 的值。

2. $emit 和 input 事件

• 概念: 子组件通过 $emit 触发事件，向父组件传递数据。
• input 事件:
  • input 事件是 v-model 默认绑定的事件，用于将子组件的数据变化同步到父组件。
  • 子组件调用 this.$emit('input', newValue) 时，父组件会接收到 newValue，并更新 v-model 绑定的变量。

3. <component :is="..." /> 动态组件

• 概念: <component> 标签用于在运行时根据传递的组件名称动态渲染不同的组件。
• 用法:
  • :is="componentName" 中的 componentName 是一个动态的值，返回所需组件的名称。

4. v-bind 传递多个 prop

• 概念: v-bind 指令可以用来动态绑定多个 prop。
• 用法:
  • v-bind="{ ...item }" 传递 item 对象的所有属性作为 prop 到子组件。

5. 父子组件通信中的数据流

• 数据流向:
  • 父组件将数据通过 props 传递给子组件（单向）。
  • 子组件通过 $emit 触发事件，将数据传回给父组件（单向）。
  • v-model 实现了这两个方向的数据绑定（双向），v-model 默认使用 value 和 input 事件来进行绑定。

6. 具体示例

a.vue

<component :is="getComponentName(item)" :item="item" v-model="dataModel" v-bind="{ ...item }" />

• 动态渲染组件。
• 传递 item 和 item 中的所有属性到子组件。
• v-model="dataModel" 实现数据的双向绑定。

b.vue

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

• 通过 $emit 触发 input 事件，将 dataValue 传递给父组件，更新 v-model 绑定的变量 dataModel。

7. 常见问题

• v-model 和 input 事件的多次触发:
  • 子组件可能多次触发 input 事件，导致父组件的值多次更新。
• 父组件接收的值与预期不符:
  • 确保 input 事件传递的值正确，并且父组件中的 v-model 变量是你希望更新的目标变量。

8. 实际应用场景

• 使用 v-model 实现表单输入组件的双向数据绑定。
• 动态组件渲染，如表单项组件，根据配置动态渲染不同类型的输入框、选择框等。
• 通过 $emit 事件，实现组件之间的灵活通信。