// 子组件 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对象。