自定义组件
组件的名称可写可不写
在index.vue页面引入该组件
注意：header.vue，我是在cart/index.vue页面中添加了模块,不是html标签，其实就是vue引入新的子组件
import vHeader from '@/components/header.vue' //导入自定义组件
export default {
name: 'cart',
components: {
vHeader // 相当于激活自定义组件
}
}
在cart/index.vue中调用自定义组件
<div>
<v-header>购物车</v-header> // //这就是你引入的自定义模块；注意是驼峰命名法
</div>
ps：说白了，自定义组件就好比封装，把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可。
另外，为了防止在同一页面写入过多的代码，不方便后期维护，便可以把整个页面分成多个小模块，然后在主页面进行模块引入，创建包括引入步骤都是一样的。
补充
slot 插槽:
思考：如果你封装一个提示组件，如何实现每次调用可以传递不同的参数？
回答：通过slot插槽
简介
顾名思义：定义组件时用 slot 留个口子，调用时插入数据到口子/槽
语法
后备（默认）内容
步骤1：定义组件时通过< slot >< /slot >占位留一个口子
步骤2：调用组件时（双标签中的内容就是【自动传递到口子里面的数据】）
具名插槽：
顾名思义占位的口子/槽有名字，调用的时候根据名字插入
向卡槽中插入数据
<template v-slot:header="item">//item接受到的是对象，键->myNameJian :值->myName
<h3>this is header</h3> //推荐键和值一样
{{item.myName}}
</template>
定义卡槽并传入数据 （myName）
扫描二维码关注公众号，回复：
9601204 查看本文章
<slot name="header" :myNameJian="myName"></slot>键->myNameJian :值->myName
//推荐键和值一样
步骤1：定义组件时通过占位留一个口子/槽
步骤2：调用时根据标识插入数据（如果调用的时候没有写标识这插入默认槽）
旧：<template slot:标识></template>
新：<template v-slot:标识></template>
作用域插槽：
调用组件，有时候需要使用组件模型中的数据
步骤1：定义组件是通过<slot name=“标识” v-bind:数据标识=“data中的键”>
< /slot>占位留一个口子/槽
步骤2：调用组件时候来接受数据
旧：<template slot:标识 slot-scope="任意名称"></template>
新：<template v-slot:标识="任意名称" ></template>
