父组件向子组件传递一个组件

说明：封装多级 tab 栏的 keep-alive 缓存通用组件 关键点：父组件向子组件传递值，对象，数组、函数，父组件还能向子组件传递一个组件。

代码语言：javascript复制

// 导入子组件全部改为动态导入
// import promoter from './promoter'
// import commissionSummary from './commissionSummary'
// import commissionDetail from './commissionDetail'
import customTabs from "&&/components/keepAliveComponent/index.vue";
const componentContent = {
  // promoter: () => require('./promoter.vue'),//此种写法不行
  promoter: () => import("./promoter.vue"),
  commissionSummary: () => import("./commissionSummary.vue"),
  commissionDetail: () => import("./commissionDetail.vue"),
};
export default {
  components: {
    customTabs,
    // promoter,
    // commissionSummary,
    // commissionDetail
  },
  data() {
    return {
      componentList: componentContent,
      tabList: [
        {
          label: "推广员",
          name: "promoter",
          keepAlive: this.$route.meta?.keepAlive,
        },
        {
          label: "佣金汇总",
          name: "commissionSummary",
          keepAlive: this.$route.meta?.keepAlive,
        },
        {
          label: "佣金明细",
          name: "commissionDetail",
          keepAlive: this.$route.meta?.keepAlive,
        },
      ],
      activeName: "promoter",
    };
  },
};

代码语言：javascript复制

export default {
  props: {
    componentList: {
      // 组件列表
      type: Object,
      required: true,
      default: () => {},
    },
    tabList: {
      // tab列表
      type: Array,
      required: true,
      default: () => [],
    },
    activeName: {
      // 当前激活的tab
      type: String,
      required: true,
      default: "",
    },
    isLine: {
      // 是否显示下划线
      type: Boolean,
      required: false,
      default: true,
    },
  },
  data() {
    return {
      tabListData: this.tabList || [],
    };
  },
  watch: {
    tabList: {
      handler(val) {
        this.tabListData = this.tabList.map((item) => {
          item.keepAlive = item.hasOwnProperty("keepAlive")
            ? item.keepAlive
            : this.$route.meta?.keepAlive; // 默认赋值keepAlive为当前页面的keepAlive值
          return item;
        });
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    tabShow() {
      console.log(this.tabListData, "jjjjjj");
      return this.tabListData.filter((item) => item.name === this.activeName)[0]
        ?.keepAlive;
    },
  },
  created() {
    // console.log(this.componentList[this.activeName], 'this.tabList')
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, 'HHHHHHHHHH')
      this.$emit("update:activeName", tab.name);
    },
  },
};


/deep/ .el-tabs__nav,
/deep/ .el-tabs__nav .el-tabs__item {
  height: 40px;
  line-height: 40px;
}

.visableClass {
  /deep/ .el-tabs__active-bar {
    display: block;
    // margin-bottom: 20px;
  }
  /deep/ .el-tabs__nav-wrap:after {
    display: block;
  }
}
.visableNoClass {
  /deep/ .el-tabs__active-bar {
    display: none;
  }
  /deep/ .el-tabs__nav-wrap:after {
    display: none;
  }
  /deep/ .el-tabs__header {
    margin-bottom: 10px;
  }
}

缓存 tabs 对象 函数 数组

0 人点赞