Vue2.0开发之——购物车案例-案例说明及导入Header(44)

PGzxc

已于 2023-03-03 22:16:22 修改

阅读量538

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端购物车

于 2023-03-03 17:54:40 首次发布

本文链接：https://blog.youkuaiyun.com/Calvin_zhou/article/details/129324962

版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

该文详细介绍了如何在Vue.js项目中创建和使用Header组件。首先，展示了初始和最终项目的预览，接着解释了components目录下各组件的功能，如Counter、Footer、Goods和Header。然后，逐步指导如何导入、注册和在App.vue中使用Header组件，并展示添加后的效果。最后，讲解了如何修改Header的标题，通过传递title属性来定制显示内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一概述

初始项目预览	最终项目预览

二案例说明

2.1 初始项目代码结构

2.2 Components组件与项目的对应关系

对应关系：

components/Counter：物品数量
components/Footer：购物车底部
components/Goods：购物车商品
components/Header：购物车标题

三导入、注册、使用Header组件

3.1 导入Header组件(App.vue)

import Header from '@/components/Header/Header.vue'

3.2 注册Header组件

export default {
  components:{
    Header
  }
}

3.3 使用Header组件

<template>
  <div class="app-container">
    <!--Header头部区域-->
    <Header></Header>
    <h1>App 根组件</h1>
  </div>
</template>

3.4 添加Header组件后的Header效果图

四修改Header标题

4.1 定义title标题属性—Header.vue

export default {
  props:{
    title:{
      default:'',
      type:String
    }
  }
}

4.2 通过titlee显示Header的标题内容—Header.vue

<template>
  <div class="header-container">{{title}}</div>
</template>

4.3 App.vue设置Header的标题

<template>
  <div class="app-container">
    <!--Header头部区域-->
    <Header title="购物车案例"></Header>
    <h1>App 根组件</h1>
  </div>
</template>