Vue组件注册【十一】

组件注册

组件名

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>

本文地址：https://blog.csdn.net/FrequencyStar/article/details/107898142