在做前端页面时,有时候每个页面都有相同的内容(类似于页面的头部),代码会重复,在每个页面都会有一模一样的重复代码,在代码多的情况下显得繁琐也不美观,而且不利于管理。
所以就可以把相同的代码封装在一个组件里,来进行调用。
首先在vue文件里创建一个文件夹,我起名为components,在里面创建一个后缀名为vue的文件。
我这里将文件名设置为如图He.vue
在页面里写好需要的代码(这里简单写了俩个按钮,可以根据需要自行设计).
<template>
<div>
<el-row>
<el-col :span="10"><p></p></el-col>
<el-col :span="10">
<el-link type="danger" class="lihe" disabled
>这是一个自定义组件</el-link
>
</el-col>
<el-col :span="4">
<el-button type="primary" icon="el-icon-s-home" round>首页</el-button>
<el-button type="primary" icon="el-icon-caret-left" round>返回</el-button>
</el-col>
</el-row>
<hr class="hl" />
</div>
</template>
<script>
export default {
name: "He",
data() {
},
setup() {
},
};
</script>
<style >
.lihe {
background-color: bisque;
height: 30px;
}
.hl {
background-color: rgba(33, 64, 119, 1);
height: 10px;
margin-top: 5px;
margin-left: 60px;
margin-right: 60px;
}
</style>
然后关键来了在需要的页面js里导入这个封装的组件.
import He from "@/components/He.vue";
然后写入注册代码.
components: {
He,
},
html里直接用组件的文件名来声明.
<div>
<He />
</div>
完整代码.
<template>
<div>
<He />
</div>
</template>
<script>
import He from "@/components/He.vue";
export default {
components: {
He,
},
data() {
return {};
},
mounted() {},
};
</script>
<style>
</style>
配置这个页面路径路由(我起名为boke).
如图头部(简单的范例):
如果在需要的页面导入这个头部只需要3行代码.
//1.html中 <div> <组件文件名 /> </div>
//2.js里面 import + 组件文件名 + from "@/上层目录/组件文件名.vue";
//3.js里面 export default {components: {组件文件名,},}
可以自行根据需要创造各种个性化的组件。