关于vue2.0废弃了events和$dispatch,如何实现事件监听

Javascript piniu 1120浏览 0评论

// 子组件 cartcontrol.vue组件, 使用$emit向父组件发送事件

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);
},

//父组件 goods.vue组件中使用v-on来监听

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

//在父组件中是  ref=”shopcart” 来获取 shopcart子组件的dom

// v-el 在2.0中已经废弃,全部采用ref和$refs方式获取子组件dom
<shopcart ref="shopcart" :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>
_drop(target) {
	this.$refs.shopcart.drop(target); //调用shopcart组件中的drop方法
},
cartAdd(target) {
	this._drop(target);
}

//(另一)子组件 shopcart组件定义的drop方法

drop(ele) {
    console.log(ele);
}

这样就完成了从一个子组件通过事件向父组件提交dom对象,然后通过父组件绑定另一子组件,并向另一子组件传递获取到的dom对象,从而达到了子组件之间传递dom对象。


发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • * 昵称:
  • * 邮箱: