父子组件的定义_父组件就像是大积木_这通过一个叫props的东西来实现

作者：编程小白 | 发布时间：2025-07-01 |

一、父子组件的定义

在Vue.js里，组件就像是乐高积木，可以堆叠起来。父组件就像是大积木，里面可以放小积木，也就是子组件。

二、父组件向子组件传递数据

父组件想给子组件传点东西，就像给小积木塞个电池。这通过一个叫props的东西来实现。父组件在用子组件的时候，就像给小积木贴个标签，告诉它需要什么数据。

父组件代码 子组件代码
父组件：<ChildComponent :data="info" /> 子组件：props: ['data']

三、子组件向父组件发送消息

子组件想跟父组件说句话，就像按了个按钮。它通过触发一个事件来实现，父组件可以监听这个事件，然后做出反应。

父组件代码 子组件代码
父组件：<ChildComponent @message="handleMessage" /> 子组件：methods: { sendMessage() { this.$emit('message', 'Hello, Parent!') } }

四、父子组件通信的注意事项

五、实例说明

想象一下，你有一个购物车，里面放满了商品。父组件就是购物车，子组件就是每个商品。父组件把商品信息给子组件，子组件把哪个商品要被移除的消息告诉父组件。

父组件（ShoppingCart.vue） 子组件（ProductItem.vue）
父组件代码：props: ['productInfo'] 子组件代码：methods: { removeProduct() { this.$emit('remove', this.id) } }

六、总结和建议

父子组件就像是一个大家庭，相互依赖又相互独立。理解和掌握它们，能让你的Vue应用更强大、更易维护。