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>
          &lt;!&ndash;点选系统名称，跳转至home主页&ndash;&gt;
          <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">
          &lt;!&ndash;<span>公交站点管理</span><br>
          <span>已改造公交站点</span><br>
          <span>未改造公交站点管理</span><br>&ndash;&gt;
          <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启动，公共组件封装使用成功，效果界面如下：

如有不足之处，希望大佬指正。