vue2.0中废弃了events和$dispatch,改用$emit实现监听事件(关于用vue2写某外卖APP项目的教学视频)

最新推荐文章于 2025-05-26 21:45:05 发布

wangwangwanglichao

最新推荐文章于 2025-05-26 21:45:05 发布

阅读量5.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： $emit $patch events vue2

本文链接：https://blog.youkuaiyun.com/wangwangwanglichao/article/details/80088054

本文介绍了在Vue2.0中如何使用$emit替代events和$dispatch进行事件监听。通过goods.vue、cartcontrol.vue和shopcart.vue组件的交互，展示了如何从子组件cartcontrol通过$emit触发'cart-add'事件，传递参数给父组件goods，再由父组件调用子组件shopcart的drop方法。示例代码详细解析了事件传播和处理流程，为理解Vue2.0组件间的通信提供帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

goods.vue组件:

在methods添加cartAdd函数

监听v-on:cart-add="cartAdd"，

购物车组件如果提交了'cart-add'事件就调用这个cartAdd函数;

对应cartcontrol.vue中methods下的addCart()函数里的:

this.$emit('cart-add', event.target);

这句话的意思是提交名为'cart-add'的事件给父组件;

```html

  <cartcontrol 
  :food="food" 
  v-on:cart-add="cartAdd"
  >
  </cartcontrol>

```

```html