自定义组件
组件的名称可写可不写
在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)
<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>