Vue封装tabbar控件并在其他页面引用

在components文件夹侠新建一个tabbar.vue文件。

代码如下：

<template>
  <div class='tabbar'>
    <ul>
      <li @click="go(item.path)"
          :class="{active:message==item.path}"
          v-for="(item,index) in atabs" v-bind:key="index">
        <img :src="message==item.path?item.icon_active:item.icon" alt="">
        {{item.title}}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  props: {
    // 调用组件时传递的页面路径
    selected: String,
  },
  name: 'tabbar',
  data () {
    return {
      message: this.selected,
      atabs: [
        // icon是未选中的图标路径，icon_active是选中的图标路径
        { title: '首页', path: 'index', icon: require('../assets/shouye@2x.png'), icon_active: require('../assets/shouye1@2x.png') },
        { title: '栏目', path: 'column', icon: require('../assets/zhaiti@2x.png'), icon_active: require('../assets/zhaiti2@2x.png') },
        { title: '我的', path: 'my', icon: require('../assets/louyu-@2x.png'), icon_active: require('../assets/louyu-2@2x.png') }
      ]
    }
  },
  created(){},
  methods: {
    go (url) {
      this.$router.push(`/${url}`)
    }
  },
}
</script>
<style lang="less" scoped>
.tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      text-align: center;
      // padding: 7px 0;
      border-top: 1px solid #eaeaea;
      font-size: 22px;
      img {
        width: 45px;
        height: 45px;
        margin: 5px auto 10px;
      }
      &.active {
        color: #2F86F6;
        font-weight: bold;
      }
    }
  }
}
</style>

在页面中调用的方式

<template>
  <div class='test'>
    <!-- 传递当前页面的路由 -->
    <tabbar :selected="selected"></tabbar>
  </div>
</template>

<script>
import tabbar from "@/components/tabbar.vue";

export default {
  name: "test",
  components: {
    tabbar: tabbar,
  },
  data() {
    return {
      // 当前页面的路由
      selected: "index",
    };
  },
};
</script>
<style scoped>
.test {
  width: 100%;
  padding-bottom: 100px;
}
</style>

感谢：https://www.cnblogs.com/reaf/p/11180634.html