Vue的tab切换的封装和components组件传递

       之前因为样式和多次的复用的原因要用到一个组件切换的封装，需要把父组件引入的components来动态输入到子组件来进行动态切换，发现父子传参只能传递状态和方法，也百度了好久，最后发现组件的传递可以通过ref来进行传递，不废话了 直接上代码        

 父组件的引入，通过titleData来导入title，对应自己引入的Storage和Stock

<template>
  <div>
    <TabCup ref="tabCup" :titleData="titleData"></TabCup>
  </div>
</template>

<script>
import TabCup from '../../components/tabCut/index.vue'
import Storage from './Storage.vue';
import Stock from './stock.vue'

export default {
  name: '',
  components: { Storage, Stock, TabCup },
  data() {
    return {
      msg: '测试',
      currentTab: "Storage",
      titleData: ["采收入库产品", "已出库产品"]
    }
  },
  created() {
  },
  mounted() {
    let params = [Storage, Stock]
    this.$refs.tabCup.init(params)
  },
  // Vue方法定义
  methods: {
  }
}
</script>

<style scoped></style>

通过init来承接ref的传值，这个时候我们可以看到可以接收到对象了

 

tabCup子组件的代码因为component组件的is可以切换动态组件 所以我通过循环来写的，当然有更好的办法大家也可以评论区告诉我

<template>
  <div>
    <div class="stockTitle">
      <div class="stockMenu" v-for="(item, index) in titleData" :key="index">
        <h3 @click="setNum(index)">{{ item }}</h3>
        <div :class="num === index ? 'active' : ''"></div>
      </div>
    </div>
    <div v-for="(item, index) in Components" :key="index">
      <component :is="index === num ? item : null"></component>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  props: ['titleData'],
  data() {
    return {
      num: 0,
      Components: []
    }
  },
  created() {
  },
  mounted() {

  },
  // Vue方法定义
  methods: {
    init(params) {
      this.Components = params
    },
    setNum(index) {
      this.num = index
    },
  },

}
</script>

<style scoped>
/* @import url(''); 引入css类 */
.stockTitle {
  display: flex;
  justify-content: center;
  align-items: center;
}

h3 {
  margin-right: 10px;
  font-size: 20px;
  font-size: 600;
}

.stockMenu {
  position: relative;
}

.active {
  width: 90px;
  height: 8px;
  position: absolute;
  bottom: 20px;
  left: calc(50% - 50px);
  background-color: rgb(167, 234, 202);
  border-radius: 4px;
  z-index: -88;
}
</style>

到这里就完成一个简单的tab切换了