Vue番外之单页组件的复用

Vue单页组件复用

全局注册

单页组件就是使用Vue脚手架创建的以vue为后缀的单页文件。

其基本结构为：

<template>
  <div>单页组件</div>
</template>

<script>
  export default {
    data () {
      return {}
    },
    methods: {}
  }
</script>

<style lang="less" scoped="scoped">
</style>

首先在src/components/static目录下创建一个单页组件，下面以IndexNav.vue为例

<template>
  <ul style="border: 1px solid #EEEEEE;">
    <li v-for="(item, index) in categoryList" :key="index" class="li-category">
      <router-link :to="{path: '/tags', query: {name: item}}">{{item}}</router-link>
    </li>
  </ul>
</template>

<script>
export default {
  data () {
    return {
      // 分类专栏列表【从数据库中获取】
      categoryList: ['CSS', 'HTML', 'JavaScript', 'Java', 'C', 'C++', 'Python', 'C#', 'Spring']
    }
  }
}
</script>

<style lang="less" scoped="scoped">
  ul {
    padding: 0;
    margin: 0;
    text-align: center;
    background: #fff;
  }
  .li-category {
    list-style: none;
    display: block;
    padding: 3px 8px;
    margin: 2px;
    a {
      text-decoration: none;
      color: #000;
    }
  }
  .li-category:hover {
    background: rgb(249,216,214);
    border-radius: 5px;
    a {
      color: red;
    }
  }
</style>

这是一个完整的单页vue，显示浏览如下

一般使用这种vue文件是通过路由跳转直接显示的，但是有些组件，如侧边栏、搜索导航在多个页面都有使用，不可能每个页面都去复制粘贴一样的代码，所以有组件的复用，而vue提供的是直接在另一个组件内部写template等进行设置，不属于一个完整的单页组件。

接着在根目录下的main.js中引入组件并进行全局注册

其中IndexNav是引入的组件名称，而'blog-index-nav'是自定义的组件名称，是在其他地方进行引用的。

注册成功后，就可以在其他vue页面中进行引用

组件复用成功

局部注册

创建一个vue单页组件，该组件是子组件

<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span style="font-weight: bold;">{{title}}</span>
      <div v-for="(item, index) in data" :key="index" class="item">
        <el-row>
          <el-col :span="8">
            <el-image style="width: 60px; height: 40px" :src="require('../../assets/images/' + item.image)" fit="contain"></el-image>
          </el-col>
          <el-col :span="8">
            <el-link style="height: 40px;line-height: 40px;font-size: 20px;">{{item.category}}</el-link>
          </el-col>
          <el-col :span="8">
            <span style="height: 40px;line-height: 40px;color:#D7D7D7;font-size: 16px;">{{item.eassyCount}}</span>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'CardComponent', // 组件的名称
  props: { // 组件要传递的参数
    title: String, // 参数1：title，字符串类型
    data: Array // 参数2：data，数组类型
  }
}
</script>

<style lang="less" scoped="scoped">
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>

把需要引入的vue文件中引入，该组件是父组件