Vue动态组件Component的:is命名规则以及简单实现

• 当组件使用短横线分隔命名 （kebab-case） 定义一个组件为my-component-name时，你在引用这个自定义元素时也必须使用 kebab-case，则必须使用my-component-name引用组件。vue3 不能使用短横线

• 当组件使用 帕斯卡命名法（PascalCase）组件命名MyComponentName，my-component-name 、myComponentName 和 MyComponentName 都是可以的。

• 当组件使用 骆驼命名法 （camelCase ）首字母小写也是可以使用 my-component-name 和 myComponentName 都是可以的

• 当组件使用下划线或者其他命名方法时，名字必须一一对应。

参考vue3 + TS 代码如下：

test.vue

<template>
  <div>
    <keep-alive>
      <component :is="type"></component>
    </keep-alive>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import TestComponent from "./TestComponent.vue";
export default defineComponent({
  name: "testPage",
  components: {
    TestComponent,
  },
  data() {
    return {
      type: "test-component",
    };
  },
});
</script>

<style lang="scss"></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

当组件命名为TestComponent的时候，type可以使用 test-component TestComponent 和 testComponent

当组件命名为testComponent的时候，type可以使用 test-component 和 testComponent

当组件命名为test_component的时候，type必须使用 test_component

TestComonent.vue

<template>
  <div>
    <h2>hello world！</h2>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "TestComponent",
  components: {},
});
</script>

<style lang="scss"></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16