vue3函数式组件,vue3定义组件
这篇文章主要介绍了Vue3组件的开发，上一篇文章我们价绍了Vue3(三)网站首页布局开发，今天继续上篇内容展开组件的开发，需要的朋友可以参考一下
目录
一、前言二、组件的开发1、组件的构成2、标题部分组件的开发3、页脚组件的开发4、修改App.vue5、移除第一个程序组件及相关代码6、重启服务查看三、最后
一、前言
果然长时间坐着或站着，会给腰带来很大负担，声明下我不是腰脱，就是个穿刺手术而已，身上有多处缝针没长好，所以会给肚子和腰带来一定的负担。
上一篇文章已经写了关于布局的开发，传送门《Vue3（三）网站首页布局开发》 ,但是我们写代码，肯定是继承了优秀的代码风格，封装的特性，所以这里我们再对代码进行修改，抽离公共部分的页脚和页眉部分。
二、组件的开发
页眉和页脚是公共的部分，每个页面都有，所以要抽离出来，然后后续的维护再App.vue中维护即可。
1、组件的构成
在成分下创建组件，基本结构如下：
由模板和脚本两对标签构成
2、header部分组件的开发
如上图红圈部分所示，就是我们要进行抽离的公共部分，即组件的开发。
在components下创建组件，header部分组件代码如下：
超文本标记语言
模板
a-layout-header class=header
div class=logo /
菜单
主题=黑暗
模式=水平
垂直模型：选定的关键点=选定的关键点1
:style={ lineHeight: 64px }
表示“不”菜单项key= 1 nav 11122/a-菜单项
表示“不”菜单项键= 2 导航2/a-菜单项
a菜单项键=3 导航3/a菜单项
/a-菜单
/a-布局-标题
/模板
脚本语言
从“vue”导入{定义组件}；
导出默认定义组件({
姓名：负责人，
});
/脚本
3、footer组件的开发
如上图所示，就是我们要footer部分组件的开发，示例代码如下：
超文本标记语言
模板
表示“不”布局-页脚style=text-align: center
软件测试君2021创建者六哥20211017
/a-布局-页脚
/模板
脚本语言
从“vue”导入{定义组件}；
导出默认定义组件({
姓名： TheFooter ，
});
/脚本
4、修改App.vue
示例代码如下：
超文本标记语言
模板
a型布局
标题/标题
路由器-视图/
页脚；页脚
/a-布局
/模板
风格
#组件-布局-演示-顶侧-2。徽标{
浮动：左；
宽度：120像素
身高：31px
边距：16px 24px 16px 0；
背景：rgba(255，255，255，0.3)；
}。蚂蚁行-RTL #组件-布局-演示-顶面-侧面-2。徽标{
浮动：对；
边距：16px 0 16px 24px
}。网站-布局-背景{
背景：# fff
}
/风格
脚本
从" @/组件/标题"导入标题；
从" @/组件/页脚"导入页脚；
导出默认值{
组件：{
头儿，
页脚
}
}
/脚本
5、移除Helloword组件及相关代码
home修改如下：
超文本标记语言
模板
a型布局
a-layout-sider width= 200 style= background:# fff
菜单
mode=inline
垂直模型：选定的关键点=选定的关键点2
v-model:openKeys=openKeys
:style="{ height: 100% ，borderRight: 0 } "
子菜单键=sub1
模板#标题
跨度
用户概述/
subnav 1
/span
/模板
表示“不”菜单项key= 1 选项1/a-菜单项
a菜单项key=2 选项2/a菜单项
a菜单项key=3 选项3/a菜单项
表示“不”菜单项key= 4 选项4/a-菜单项
/a-子菜单
子菜单键=sub2
模板#标题
跨度
笔记本电脑-概述/
subnav 2
/span
/模板
a菜单项key=5 选项5/a菜单项
a菜单项key=6 选项6/a菜单项
a菜单项key=7 选项7/a菜单项
a菜单项key=8 选项8/a菜单项
/a-子菜单
子菜单键=sub3
模板#标题
跨度
通知-概述/
subnav 3
/span
/模板
a菜单项key=9 选项9/a菜单项
表示“不”菜单项key= 10 选项10/a-菜单项
a菜单项key=11 选项11/a菜单项
a菜单项key=12 选项12/a菜单项
/a-子菜单
/a-菜单
/a-布局考虑因素
布局内容
:style={ background: #fff ，padding: 24px ，margin: 0，minHeight: 280px }
内容
/a-布局-内容
/a-布局
/模板
脚本语言
从“vue”导入{定义组件}；
导出默认定义组件({
姓名：家，
});
/脚本
6、重启服务查看
重新编译，再次访问页面结果如下：
三、最后
到此这篇关于Vue3(四)组件的开发的文章就介绍到这了，更多相关Vue3组件开发内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。