小球飛入購物車 · Vue2.x

[TOC] #### 小球飛入購物車組件 * [ ] 點擊添加商品，發布事件，將當前dom派發給父組件 ![](https://box.kancloud.cn/47d570cc8797552120b0fe9c3b42892f_376x536.png) ~~~ methods: { plus(event) { if (!this.food.count) { this.$set(this.food, 'count', 1) } else { this.food.count++ } // 派發事件，當前dom派發給父組件 this.$emit('add', event.target) }, ~~~ ***** * [ ] 父組件監聽，調用底部組件事件，傳入子組件派發的Dom元素 ![](https://box.kancloud.cn/9692f9bb0cf9060d9ffade0ea612ba3b_752x342.png) ![](https://box.kancloud.cn/4abf10d709a7af865ee69828f6f236d3_444x277.png) ***** * [ ] ShopCart 組件創建小球 ![](https://box.kancloud.cn/e7dc41c10838ea0f4b793c6a1b6c5eaa_424x491.png) ![](https://box.kancloud.cn/cf6a9d0c2312ae9eabf0080579a18e77_314x239.png) ![](https://box.kancloud.cn/a19c9404a5498f468ca487ec34840a8c_639x476.png) ![](https://box.kancloud.cn/7b46777f4a6345a1ac0b42349fe1e0f8_671x371.png) ![](https://box.kancloud.cn/beea2f187a90c6072430710d2c8f3c6f_396x261.png) ![](https://box.kancloud.cn/efe98e39cda3d634d7376d2732070690_437x460.png) ![](https://box.kancloud.cn/7257d65dbbe6c877b19e1e8f754ed5c0_684x495.png) ![](https://box.kancloud.cn/1dbc9c65b05deb1bdf60ab40f191ccd0_696x390.png) ![](https://box.kancloud.cn/34701bdd9b5fd3a27e19a64f8684b852_402x315.png) ***** 至此，小球飛入購物車動畫就完成了