失眠网 > vue-cli3脚手架项目：HeaderTop（公共头部）组件（使用v-slot pros实现）

vue-cli3脚手架项目：HeaderTop（公共头部）组件（使用v-slot pros实现）

时间：2023-10-16 00:10:06

2.2 HeaderTop组件（使用v-slot、pros实现）

2.2.1 HeaderTop组件布局（css样式）实现

2.2.2 使用插槽实现标签的插入（预留标签）

2.2.3 代码实现

2.2 HeaderTop组件（使用v-slot、pros实现）

学习插槽请参考：vue官网中插槽内容，下面是项目实现的地方。

因为多个单页路由组件都有类似的头部：标题，[可选的：搜索，登录|注册]。因此可以将其抽取成一个公有的组件，以实现组件的复用。复用组件命名为HeaderTop组件。

2.2.1 HeaderTop组件布局（css样式）实现

1 要求：实现三栏布局（其中两栏可能没有）

三栏和一栏

2 方法

方法1：可以使用绝对定位加transform

方法2：使用flex布局（代码实现的）

2.2.2 使用插槽实现标签的插入（预留标签）

1 方法1：使用v-slot实现具名标签、prop实现父组件传值给子组件

因为HeaderTop组件是可以复用的组件，又每一个使用该组件需要设置的标题不一样，所以标题可以使用prop方式传递

2 方法2：使用v-slot实现具名标签、作用域插槽（子组件传值给父组件）

标题可以使用作用域插槽方式传递

2.2.3 代码实现

该组件是项目中的一个小组件，是在vue-cli3中使用。参考代码时，请自行设置好目录，运行时所需要的其他代码，如设置路由的index.js、跟组件App.vue、入口js main.js 等。

给出src部分目录，如下

1HeaderTop.vue组件代码：定义插槽的地方

方法1和方法2代码都在这里

<template><header class="headerClass"><slot name = "headerResearch"></slot><slot name = "headTitle" v-bind:titleList = "titleList"></slot><slot name = "headerLogin"></slot></header></template><script>export default {/*props: {title: String}*/data: function () {return {titleList: {"mSiteTitle": {title: "外卖"},"searchTitle": {title: "搜索"},"orderTitle": {title: "订单"},"profileTitle": {title: "个人中心"}}}}}</script><style lang="stylus" rel="stylesheet/stylus">@import "../../common/stylus/mixins.styl".headerClassdisplay flex /*实现不定数栏布局，这里有三或者1*/flex-direction row /* 顺序指定了弹性子元素在父容器中的位置。横向从左到右（默认，这里可无）*//*justify-content centeralign-items center*/width 100%height 3rembackground-color #00b7ff.leftHeaderwidth 3remtext-align center/*实现内容的水平居中*/height 3rem/*本行和下一行实现内容的垂直居中*/line-height 3rem.iconfontcolor #ffffont-size 1.5rem.headerTitleflex 1 /*使用剩下的所有空间*/text-align center/*实现内容的水平居中*/height 3rem/*本行和下一行实现内容的垂直居中*/line-height 3remfont-size 1.2remcolor #fff.rightHeaderwidth 6remtext-align center/*实现内容的水平居中*/height 3rem/*本行和下一行实现内容的垂直居中*/line-height 3remfont-size 1.2remcolor #fff</style>

2Msite.vue组件头部代码：使用插槽的组件

1）名词

具名插槽：在向具名插槽提供内容的时候，我们可以在一个<template>元素上使用v-slot指令，并以 v-slot 的参数的形式提供其名称。

作用域插槽：在父组件中访问子组件（插槽中）内部的一些可用数据。也就说可以实现子组件的数据传入到父组件

解构插槽：在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES 解构来传入具体的插槽 prop。

2）实现的结果

3）代码

<template><div><HeaderTop><template v-slot:headerResearch><router-link to = "/search" class="leftHeader"><span><i class="iconfont icon-sousuo"></i></span></router-link></template><template #headTitle = "{titleList: titleName}"><span class = "headerTitle">{{titleName.mSiteTitle.title}}</span></template><template #headerLogin><router-link to = "/login" class="rightHeader"> <span>登录|注册</span></router-link></template></HeaderTop></div></template><script>/*首页组件*/import HeaderTop from "../../components/HeaderTop/HeaderTop"export default {components: {HeaderTop}}</script><style lang="stylus" rel="stylesheet/stylus"></style>

3Search.vue组件头部代码：使用插槽的组件

1）结果

2）代码

<template><HeaderTop><template #headTitle = "titleName"><span class = "headerTitle">{{titleName.titleList.searchTitle.title}}</span></template></HeaderTop></template><script>/*Search搜索组件*/import HeaderTop from "../../components/HeaderTop/HeaderTop";export default {components: {HeaderTop}}</script><style lang="stylus" rel="stylesheet/stylus"></style>

参考

百里于7月12日

如果有错，请您指出！如有侵权，请联系我删除！

如果觉得《vue-cli3脚手架项目：HeaderTop（公共头部）组件（使用v-slot pros实现）》对你有帮助，请点赞、收藏，并留下你的观点哦！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。