常用的几种 Vue 父子组件传值方式

1. 父组件向子组件传值（props）

• 父组件代码：Parent.vue

• 子组件代码：Child.vue

  2. 子组件向父组件传值（this.$emit）

• 子组件代码：Child.vue

• 父组件代码：Parent.vue

  3. 父子组件数据双向绑定（.sync 修饰符）

• 父组件代码：Parent.vue

• 子组件代码：Child.vue

  4. 父子组件数据双向绑定（v-model）

• 父组件代码：Parent.vue

• 子组件代码：Child.vue

  5. 祖孙组件通信（父组件作为中介）

• 父组件代码：Parent.vue

• 子组件代码：.vueChild

• 孙组件代码：Grandchild.vue

  6. 祖孙组件通信（provide 和 inject）

• 祖组件代码：Grandparent.vue

• 孙组件代码：Grandchild.vue

  这些代码示例展示了 Vue 中父子组件传值的常见方式，包括父组件向子组件传值、子组件向父组件传值、父子组件数据双向绑定以及祖孙组件通信。通过这些方式，可以在不同的组件之间灵活地传递数据，满足各种应用场景的需求。