vue2中父子组件传值案例总结

在 Vue 2 中，父子组件之间的传值是通过 props 和事件来实现的。下面是详细的解释和总结：

1. 父组件向子组件传值

父组件可以通过 props 向子组件传递数据。以下是一个简单的示例：

父组件 (Parent.vue)

子组件 (Child.vue)

2. 子组件向父组件传值

子组件可以通过 $emit 方法向父组件发送事件，父组件可以监听这个事件并处理数据。以下是示例：

子组件 (Child.vue)

父组件 (Parent.vue)

总结

• 父组件向子组件传值：使用 props。父组件定义数据并将其作为属性传递给子组件。
• 子组件向父组件传值：使用自定义事件。子组件通过 $emit 发送事件，父组件通过 v-on 或 @ 监听这些事件并处理传递的数据。
• 单向数据流：在 Vue 中，数据流是单向的，父组件的数据流向子组件，而子组件通过事件向父组件发送信息。

这种父子组件间的通信方式使得组件之间的关系清晰，便于维护和扩展。