Vue组件注册【十一】

最新推荐文章于 2024-03-08 10:30:23 发布

FrequencyStar

最新推荐文章于 2024-03-08 10:30:23 发布

阅读量130

点赞数

分类专栏： Vue官方文档入门文章标签： vue

本文链接：https://blog.csdn.net/FrequencyStar/article/details/107898142

版权

Vue官方文档入门专栏收录该内容

15 篇文章 0 订阅

订阅专栏

组件注册

组件名

Vue.component('my-component-name', { /* ... */ })

该组件名就是 Vue.component 的第一个参数。

自定义组件名 (字母全小写且必须包含一个连字符)。推荐

组件名大小写

定义组件名的方式有两种：

使用kebab-case
```
Vue.component('my-component-name', { /* ... */ })
```
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。
使用PascalCase
```
Vue.component('MyComponentName', { /* ... */ })
```
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

因此，强烈推荐使用kebab-case。

全局注册

我们只用过 Vue.component 来创建组件：

Vue.component('my-component-name', {
  // ... 选项 ...
})

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。

局部注册

<div id="app">
      <component-a></component-a>
      <component-b></component-b>
      <component-c></component-c>
    </div>

    <script>
      let componentA = {
        template: `<h1>componentA</h1>`
      }
      let componentB = {
        template: `<h1>componentB</h1>`
      }
      let componentC = {
        components: {
          'com-a': componentA
        },
        template: `<h1>componentC<com-a></com-a></h1>`
      }
      let vm = new Vue({
        el: '#app',
        data: function () {
          return {}
        },
        components: {
          'component-a': componentA,
          'component-b': componentB,
          'component-c': componentC
        }
      })
    </script>