vue 子组件批量导入及根据参数 动态组件渲染

<template>
    <div>
        <component class="item" :is="currentView"></component>
    </div>
</template>

<script>
const path = require("path");
const files = require.context("@/views/handle-instruction/details", false, /\.vue$/);
const modules = {};
files.keys().forEach(key => {
  const name = path.basename(key, ".vue");
  modules[name] = files(key).default || files(key);
});
export default {
    components: modules,
    computed: {
        currentView() {
            return `detail-${this.$route.query.type}`
        }
    }
}
</script>

::v-deep .item {
    .wrapper {
        margin: 0 20px;
        padding-right: 40px;
        width: 60%;
    }
    .wrapper img {
        width: 100%;
    }
    .wrapper table tr {
        vertical-align: baseline;
    }
    .wrapper p {
        margin-top: 10px;
        line-height: 1.3;
    }
    .bold {
        font-weight: bold;
    }
    .blue {
        color: #528EFE;
    }
}