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

WMSmile

已于 2022-06-22 12:03:11 修改

阅读量2.3k

点赞数 1

分类专栏： Vue H5 文章标签： vue.js 前端 javascript

于 2022-06-22 12:00:22 首次发布

本文链接：https://blog.csdn.net/wm9028/article/details/125406338

版权

Vue 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

5 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue 3中组件：is属性的命名规则，包括kebab-case、PascalCase和骆驼命名法的应用，以及如何根据组件的不同命名方式正确引用。通过实例代码演示了如何在组件引用中匹配不同的命名风格。

摘要由CSDN通过智能技术生成

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>

当组件命名为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>