Vue 文档组件传值案例剖析

在 Vue 开发中，组件传值是一项核心技能，深入理解并掌握它对于构建高效、灵活的应用至关重要。下面通过实际案例来详细剖析 Vue 文档中的组件传值。

先看父组件向子组件传值。假设我们要构建一个商品展示系统，有一个父组件 ProductList 和子组件 ProductItem。在 ProductList 中，我们定义一个商品数组 products，其中每个商品对象包含 name、price 等属性。通过在 ProductItem 标签上定义自定义属性，如 <ProductItem :product="product" v-for="product in products" :key="product.id" />，这里的 :product 就是自定义属性，将 products 数组中的每个商品对象传递给 ProductItem 子组件。在子组件 ProductItem 中，通过 props 选项来接收这个值，props: ['product']，然后就可以在模板中使用 {{ product.name }} 和 {{ product.price }} 来展示商品信息。这种传值方式使得父组件能够灵活地控制子组件展示的数据。

再探讨子组件向父组件传值。以商品添加购物车功能为例，在 ProductItem 子组件中有一个“加入购物车”按钮。当用户点击按钮时，需要将该商品信息传递给父组件来更新购物车数据。首先在子组件中定义一个方法 addToCart，在方法中使用 this.$emit('add-product', this.product) 触发一个自定义事件 add-product，并将当前商品对象作为参数传递。在父组件 ProductList 中，监听这个自定义事件 <ProductItem @add-product="handleAddProduct" :product="product" v-for="product in products" :key="product.id" />，然后在 handleAddProduct 方法中处理接收到的商品数据，比如将其添加到购物车数组中。

还有非父子组件之间的传值，即兄弟组件传值。可以通过创建一个事件总线（Event Bus）来实现。创建一个全局的 eventBus.js 文件，import Vue from 'vue'; export const eventBus = new Vue();。在需要传值的一个兄弟组件中引入 eventBus，发送数据 import { eventBus } from './eventBus'; eventBus.$emit('send-data', '要传递的数据');。在另一个兄弟组件中监听这个事件 import { eventBus } from './eventBus'; created() { eventBus.$on('send-data', (data) => { console.log(data); }); }。

通过这些案例剖析，我们能更清晰地掌握 Vue 文档中组件传值的方法和应用场景，为开发复杂的 Vue 应用打下坚实基础。