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