美文网首页
sell-food组件

sell-food组件

作者: 焦迈奇 | 来源:发表于2018-10-16 23:00 被阅读0次
  1. food组件小球的问题
  • 根据教程代码应该如下
addFirst (event) {
      if (!event._constructed) {
        return;
      }
      this.$emit('cart-add', event.target);
      Vue.set(this.food, 'count', 1);
    }

可是你会发现不仅第一个小球没有出现,而且cartcontrol组件中的小球也没有出现
教程使用vue1.0所以使用的为this.$dispatch();来触发事件,而在vue2.0版本中该方法已经弃用了,但是得特意说明一下dispatch可以用来处理兄弟间的通信,所以教程中的事件是可以触发成功的显示小球。

$dispatch() // 派发事件,沿着父链冒泡

broadcast 事件广播
@param {componentName} 组件名称
@param {eventName} 事件名
@param {params} 参数
遍历寻找所有子孙组件,假如子孙组件和componentName组件名称相同的话,则触发\$emit的事件方法,数据为 params.
如果没有找到 则使用递归的方式 继续查找孙组件,直到找到为止,否则继续递归查找,直到找到最后一个都没有找到为止。 

$broadcast() // 广播事件, 向下传递给所有的后代

 dispatch 查找所有父级,直到找到要找到的父组件,并在身上触发指定的事件。
 @param { componentName } 组件名称
 @param { eventName } 事件名
 @param { params } 参数

在官方vue2.0中

image.png
我们知道dispatch是基于组件树的事件流方式来通信的,通过使用事件中心实现组件的自由交流。
所以我们需要做以下的修改:
  • 在各个用到触发自定义事件的组件中引入事件中心文件(src/assets/eventcenter.js)
import Vue from 'vue';
export default new Vue();

  • 触发事件的代码变成
    eventcenter.$emit('cart-add',event.target);
  • 在监听该事件的组件即goods组件中,在created函数钩子中添加
    dropball.$on('cart-add', this.cartAdd);

会发现小球就可以正常的显示了

相关文章

  • sell-food组件

    food组件小球的问题 根据教程代码应该如下 可是你会发现不仅第一个小球没有出现,而且cartcontrol组件中...

  • sell-food组件和ratingselect联动

    根据教程vue1.0,ratingselect组件触发自定义事件在父组件food中由event监听事件,实现sel...

  • vue组件之间的通信

    一、父子组件,父组件=》子组件 父组件中的子组件: 子组件:props 二、父子组件,子组件=》父组件 子组件: ...

  • Angular5 父子组件之间的通信

    一、父组件向子组件通信 父组件: 子组件: 二、子组件向父组件通信 父组件: 子组件:

  • react中调用子组件的方法

    class组件 父组件 子组件 react hook 父组件调用子组件方法 父组件 子组件

  • ReactNative组件间的通信

    父组件向子组件通信 父组件向子组件传值 父组件向子组件传递方法 子组件向父组件通信 子组件向父组件传值 子组件向父...

  • (17.06.21)Vue组件、组件的定义和使用、组件之间的数据

    Vue组件组件        Component     定义组件        公共的组件     使用组件  ...

  • ReactNative组件介绍

    ReactNative组件介绍 View组件Text组件TouchableOpacity组件TextInput组件...

  • 高级任务3

    轮播组件曝光加载组件Tab组件日历组件Modal 组件

  • Vue父子间通信

    1.父组件向子组件传值 父组件: 子组件: 2.子组件向父组件传值 父组件: 子组件: 3.父组件调用子组件的方法...

网友评论

      本文标题:sell-food组件

      本文链接:https://www.haomeiwen.com/subject/rjnhzftx.html