案例:购物车案例（vue组件总结）

努力学习前端的小陈

已于 2022-05-12 19:56:10 修改

阅读量2.5k

点赞数 4

分类专栏： Vue 文章标签：前端 vue vue组件购物车案例总结

于 2022-04-25 14:20:05 首次发布

本文链接：https://blog.csdn.net/qq_57587705/article/details/124403396

版权

本文通过一个购物车案例，详细介绍了Vue组件的实现过程，包括项目结构、组件封装和数据共享。从初始化项目到封装各个组件，如Header、Goods、Footer和Counter，讲解了每个步骤，并提供了完整代码。此外，还总结了通过案例学习到的Vue知识点，如生命周期函数、组件间数据共享和ref的使用。

摘要由CSDN通过智能技术生成

1. 案例效果

2. 实现步骤

① 初始化项目基本结构

② 封装MyHeader 组件

③ 基于axios 请求商品列表数据（ GET 请求，地址为 https://www.escook.cn/api/cart）

④ 封装MyFooter 组件

⑤ 封装MyGoods 组件

⑥ 封装MyCounter 组件

3. 完整代码：

项目目录：

main.js部分：

import Vue from 'vue'
import App from './App.vue'
// 导入 bootstrap 样式表
import 'bootstrap/dist/css/bootstrap.min.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

App.vue部分：

<template>
  <div class="app-container">
    <!-- Header 头部区域 -->
    <Header title="购物车案例"></Header>
    <!-- 循环渲染每一个商品的信息 -->
    <Goods
      v-for="item in list"
      :key="item.id"
      :id="item.id"
      :title="item.goods_name"
      :pic="item.goods_img"
      :price="item.goods_price"
      :state="item.goods_state