vue2.0废弃$dispatch,替换成$emit 和$refs,使用方法如下(根据慕课饿了么案例,教程上的写法要改[为了购物车小球抛下的动画]):

// goods.vue组件--使用v-on监听
<div class="cartcontrol-wrapper">
  <cartcontrol :food="food" v-on:cart-add="cartAdd"></cartcontrol>
</div>
在methods添加cartAdd函数

// 监听v-on:cart-add="cartAdd",购物车组件如果提交了'cart-add'事件就调用这个cartAdd函数,
// 对应cartcontrol.vue中methods里面addNum()函数里的
this.$emit('cart-add', event.target);
这句提交名为'cart-add'的事件给父组价.
methods: {

  cartAdd(el) {
          // dom元素更新后执行, 因此此处能正确打印出更改之后的值;
 this.$nextTick(() => {
 this.$refs['shopcart'].drop(el); //调用shopcart组件的drop()函数
});
}
}

1
2
good.vue  // v-el的写法在vue2.0中已经废弃,现在全部采用 ref和$ref

定Dom节点元素
<shopcart ref="shopcart" :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>
1
2
3
4
5
6
7
8
9
10
11
// cartcontrol.vue组件
addCart(event) {
  if (!event._constructed) {
    return;
  }
  if (!this.food.count) {
     Vue.set(this.food, 'count', 1);
  else {
      this.food.count++;
  }
  this.$emit('cart-add', event.target); //添加这句,提交'cart-add'事情给父组件,第二个是要传递的参数
},// cartcontrol.vue组件
1
2
3
4
5
// shopcart.vue组件的drop()函数
methods: {
    drop(el) {
        console.log(el);
    }
}// shopcart.vue组件

子组件向父组件传递过程梳理:

目标:把自组件cartcontrol的addCart()里用this.$emit('cart-add',event.target)这句,获取并把添加按钮这个DOM元素以'cart-add'名字传递给父组件good.vue,

传给父组件good.vue,父组件里面的

<cartcontrol :food="food"  v-on:cart-add="cartAdd"></cartcontrol>用v-on:cart-add="cartAdd" 表示监听传来的cart-add事件,监听到就调用cartAdd()函数处理,

cartAdd()函数里这句this.$refs['shopcart'].drop(el);调用shopcart组件的drop()函数

shopcart.vue组件的函数是打印出当前参数.

Logo

前往低代码交流专区

更多推荐