goods.vue组件:
在methods添加cartAdd函数
监听v-on:cart-add="cartAdd"，
购物车组件如果提交了'cart-add'事件就调用这个cartAdd函数;
对应cartcontrol.vue中methods下的addCart()函数里的:
this.$emit('cart-add', event.target);
这句话的意思是提交名为'cart-add'的事件给父组件;
```html
<cartcontrol
:food="food"
v-on:cart-add="cartAdd"
>
</cartcontrol>
```
```html
<shopcart
ref="shopcart"
:select-foods="selectFoods"
:delivery-price="seller.deliveryPrice"
:min-price="seller.minPrice"
>
</shopcart>
```
```ecmascript 6
methods: {
cartAdd (el) {
// dom元素更新后执行， 因此此处能正确打印出更改之后的值；
this.$nextTick(() => {
// 调用shopcart组件的drop()函数
this.$refs['shopcart'].drop(el);
});
}
}
```
cartcontrol.vue组件:
```javascript
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'事情给父组件，第二个是要传递的参数
}
```
shopcart.vue组件:
```javascript
methods: {
drop(el) {
console.log(el); // 点击加号看是否输出成功
}
}
```
子组件向父组件传递过程梳理：
子组件cartcontrol的addCart()里,
用this.$emit('cart-add',event.target)方法获取<添加按钮>,
并把这个DOM元素以'cart-add'名字传递给父组件goods;
父组件goods用v-on:cart-add="cartAdd"监听传来的cart-add事件，
监听到就调用cartAdd()函数处理;
cartAdd()函数里这句this.$refs['shopcart'].drop(el);
调用shopcart.vue组件的drop()函数,看是否打印出当前参数．
---------------------
作者：wangwangwanglichao
来源：CSDN
原文：https://blog.csdn.net/wangwangwanglichao/article/details/80088054
版权声明：本文为博主原创文章，转载请附上博文链接！
网友评论