Component注册组件的时候有没有办法使用父组件传来的参数？

Question

<template>
  <v-container class="fill-height" fluid>
    <component :is="app" />
  </v-container>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";

@Component({
  components: {
    login: () => import("@/components/common/Login.vue"),
    registry: () => import("@/components/common/Registry.vue"),
    get: () => import("@/components/common/Get.vue")
  }
})
export default class Basecom extends Vue {
@Prop(String) appname!: string;
public app = "";
@Watch("appname", { immediate: true, deep: true })
onPersonChanged(val: string, oldVal: string) {
this.app = val;
}
}
</script>

<style scoped></style>

如代码所示，appname是由父组件传过来的，我想将components的login,get,registrt和import对应的xxx.vue用appname来替代，不知道有什么解决方法?

Answer 1

可以。你需要把requirejs打包进项目,用真实的相对路径。

import requirejs from 'requirejs';
export default function (appname) {
    return Component({
      components: {
        login: () => requirejs(appname + "/src/components/common/Login.vue"),
        registry: () => requirejs(appname + "/src/components/common/Registry.vue"),
        get: () => requirejs(appname + "/src/components/common/Get.vue")
      }
    })(class Basecom extends Vue {
      @Prop(String) appname!: string;
      public app = "";
      @Watch("appname", { immediate: true, deep: true })
      onPersonChanged(val: string, oldVal: string) {
        this.app = val;
        console.log(this.app);
      }
    })
}