Vue中引入自定义公共组件方法(详细步骤)
公共组件使用场景:项目中若多个页面都显示有相同的区域内容,则该公共区域内容可以封装成公共组件进行使用
·
Vue中引入自定义公共组件方法
说明:
公共组件使用场景:项目中若多个页面都显示有相同的区域内容,则该公共区域内容可以封装成公共组件进行使用。
步骤如下
1、创建自定义公共组件,在src/components目录下自定义所需的公共组件:
2、封装公共组件、写组件实现的功能:
完整代码如下:
headTop/index.vue组件:
<template>
<div id="home-container" class="main">
<!--页面上方面板-->
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark" style="background-color: #2c3e50">
<div>
<!--跳转home主页-->
<span class="title" style="color: white"><a href="../../views/home/index.vue" style="color: white;text-decoration: none">浦东新区公交站点管理系统</a></span>
</div>
</div></el-col>
</el-row>
</div>
</template>
<script>
export default {
/*实现三个页面的点击跳转*/
methods:{
/*页面跳转*/
allStation(){
this.$router.push({path:'xxx'})/*写入跳转路径*/
},
transform(){
this.$router.push({path:'xxx'})/*写入跳转路径*/
},
noTransform(){
this.$router.push({path:'xxx'})/*写入跳转路径*/
}
}
}
</script>
<style>
/*上侧 公交站点管理系统 标题样式*/
.title{
position: absolute;
left: 40px;
top: 10px;
display: flex;
align-items: center;
}
/*左侧菜单导航栏菜单样式:公交站点管理、已改造站点管理。未改造站点管理*/
#li-allStation{
color: white;
list-style-type: none
}
#li-transform{
color: white;
list-style-type: none;
margin-top: 30px
}
#li-noTransform{
color: white;
list-style-type: none;
margin-top: 30px
}
/*输入站点编码点击按钮样式*/
#search-button{
background-color:rgb(0,153,204);
color: white;
width: 100px
}
/*使用hover选择器给所有li标签添加上鼠标移入时的样式*/
li:hover{
cursor: pointer;/*鼠标移入,显示手掌*/
background: skyblue;/*鼠标移入,显示背景颜色*/
}
ul{
width: 144px;/*给菜单栏li标签添加宽度*/
}
</style>
navigationPanel/index.vue组件:
<template>
<div id="home-container" class="main">
<el-row>
<!--1、左侧面板菜单导航栏公共组件-->
<el-col :span="4"><div class="grid-content bg-purple">
<div style="height: 1000px;background-color: #2c3e50">
<!--<span>公交站点管理</span><br>
<span>已改造公交站点</span><br>
<span>未改造公交站点管理</span><br>-->
<br>
<ul>
<li id="li-allStation" @click="allStation">公交站点管理</li>
</ul>
<ul>
<li id="li-transform" @click="transform">已改造公交站点</li>
</ul>
<ul>
<li id="li-noTransform" @click="noTransform">未改造公交站点管理</li>
</ul>
</div>
</div></el-col>
</el-row>
</div>
</template>
<script>
/**
* 右侧面板表格展示js
* */
export default {
/*实现三个页面的点击跳转*/
methods:{
/*页面跳转*/
allStation(){
this.$router.push({path:'xxx'})/*写入跳转路径*/
},
transform(){
this.$router.push({path:'xxx'})/*写入跳转路径*/
},
noTransform(){
this.$router.push({path:'xxx'})/*写入跳转路径*/
}
}
}
</script>
<style>
/*表单样式*/
/*公共组件不需要此部分*/
/*.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
!*修改上侧栏的高度样式*!
.grid-content {
border-radius: 4px;
min-height: 46px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
#home-container{
background-color: rgb(43,45,70);
width: 100%;
height: 100%;
}*/
/*上侧 公交站点管理系统 标题样式*/
.title{
position: absolute;
left: 40px;
top: 10px;
display: flex;
align-items: center;
}
/*左侧菜单导航栏菜单样式:公交站点管理、已改造站点管理。未改造站点管理*/
#li-allStation{
color: white;
list-style-type: none
}
#li-transform{
color: white;
list-style-type: none;
margin-top: 30px
}
#li-noTransform{
color: white;
list-style-type: none;
margin-top: 30px
}
/*输入站点编码点击按钮样式*/
#search-button{
background-color:rgb(0,153,204);
color: white;
width: 100px
}
/*使用hover选择器给所有li标签添加上鼠标移入时的样式*/
li:hover{
cursor: pointer;/*鼠标移入,显示手掌*/
background: skyblue;/*鼠标移入,显示背景颜色*/
}
ul{
width: 144px;/*给菜单栏li标签添加宽度*/
}
</style>
3、在main.js里进行公共组件初始化
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
/*引入自定义公共组件*/
/*左侧导航栏公共组件1*/
import navigationPanel from './components/navigationPanel/index';
Vue.use(navigationPanel);/*使用自定义的公共组件*/
Vue.component('navigation_panel',navigationPanel);/*初始化公共组件*/
/*上侧头部面板公共组件2*/
import headTop from './components/headTop/index';
Vue.use(navigationPanel);/*使用自定义的公共组件*/
Vue.component('head_top',headTop);/*初始化公共组件*/
/*引入自定义公共组件*/
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App,navigationPanel,headTop},/*添加自定义组件*/
template: '<App/>'
})
4、在需要使用公共组件的页面进行公共组件调用
例如在项目首页页面使用公共组件,首页页面在src/views/home/index.vue目录下
按需在中写入公共组件标签,这里我需要引入的组件标签分别是:
<head_top></head_top>
<navigation_panel></navigation_panel>
在中写入组件引入的js代码
先进行公共组件引入:
import headTop from '../../components/headTop'
import navigationPanel from '../../components/navigationPanel'
再在export default {}写入:
comments: {
headTop,
navigationPanel,
}
完整代码如下:
<template>
<div id="home-container" class="main">
<!--页面上方头部面板信息-->
<!--该部分通过公共组件引入-->
<!--<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark" style="background-color: #2c3e50">
<div>
<!–点选系统名称,跳转至home主页–>
<span class="title" style="color: white"><a href="index.vue" style="color: white;text-decoration: none">公交站点管理系统</a></span>
</div>
</div></el-col>
</el-row>
<el-row>-->
<head_top></head_top>
<!--1、左侧面板菜单导航栏-->
<!--该部分通过公共组件引入-->
<!--<el-col :span="4"><div class="grid-content bg-purple">
<div style="height: 1000px;background-color: #2c3e50">
<!–<span>公交站点管理</span><br>
<span>已改造公交站点</span><br>
<span>未改造公交站点管理</span><br>–>
<br>
<ul>
<li id="li-allStation" @click="allStation">公交站点管理</li>
</ul>
<ul>
<li id="li-transform" @click="transform">已改造公交站点</li>
</ul>
<ul>
<li id="li-noTransform" @click="noTransform">未改造公交站点管理</li>
</ul>
</div>
</div></el-col>-->
<navigation_panel></navigation_panel>
<!--2、右侧面板表格展示栏-->
<!--此处代码省略-->
</div>
</template>
<script>
/**
*引入自定义公共组件
* */
import headTop from '../../components/headTop'
import navigationPanel from '../../components/navigationPanel'
/**
* 右侧面板表格展示js+引入自定义公共组件js
* */
export default {
data() {
return {
/*引入自定义公共组件js*/
/*无return数据*/
}
},
/*实现三个页面的点击跳转*/
methods:{
/*页面跳转*/
allStation(){
this.$router.push({path:'xxx'})/*写入跳转路径*/
},
transform(){
this.$router.push({path:'xxx'})/*写入跳转路径*/
},
noTransform(){
this.$router.push({path:'xxx'})/*写入跳转路径*/
}
},
comments: {
headTop,
navigationPanel,
}
}
</script>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
/*修改上侧栏的高度样式*/
.grid-content {
border-radius: 4px;
min-height: 46px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
#home-container{
background-color: rgb(43,45,70);
width: 100%;
height: 100%;
}
/*上侧 公交站点管理系统 标题样式*/
.title{
position: absolute;
left: 40px;
top: 10px;
display: flex;
align-items: center;
}
/*左侧菜单导航栏菜单样式:公交站点管理、已改造站点管理。未改造站点管理*/
#li-allStation{
color: white;
list-style-type: none
}
#li-transform{
color: white;
list-style-type: none;
margin-top: 30px
}
#li-noTransform{
color: white;
list-style-type: none;
margin-top: 30px
}
/*输入站点编码点击按钮样式*/
#search-button{
background-color:rgb(0,153,204);
color: white;
width: 100px
}
/*使用hover选择器给所有li标签添加上鼠标移入时的样式*/
li:hover{
cursor: pointer;/*鼠标移入,显示pointer图标*/
background: skyblue;/*鼠标移入,显示背景颜色*/
}
ul{
width: 144px;/*给菜单栏li标签添加宽度*/
}
</style>
5、npm run dev启动,公共组件封装使用成功,效果界面如下:
如有不足之处,希望大佬指正。
更多推荐
已为社区贡献15条内容
所有评论(0)