Vue组件的注册

Vue组件命名

1、短横线分隔（ kebab-case）

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

注意字母全小写

2、帕斯卡命名方式（PascalCase）

Vue.component('MyComponentName', { /* ... */ })

（1）当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
（2）注意：直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

Vue组件注册使用

一、全局注册

Vue组件在全局注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中，全局注册组件使用 Vue.component()方法。

1、代码内部嵌入

（1）通过Vue.extend()和Vue.component()注册

//创建组件构造器对象
var tmp1 = Vue.extend({
       template: "<p>通过 Vue.extend 创建的 tmp1 组件</p>"
     });
//注册组件
Vue.component("my-tmp1", tmp1);  //第一个参数是自定义名称，第二个参数是组件名称

（2）通过Vue.component()字面量注册

//第一个参数是自定义名称，第二个是组件实例
Vue.component("my-tmp2", Vue.extend({
     template: "<p>通过 Vue.extend 创建的 tmp2 组件</p>"
  }));

（3）通过< template id=“tmp1”> 方式注册

js部分：

Vue.component("my-tmp3", {
    template: "#temp3"
   });

HTML部分：

<template id="temp3">
    <h4>这是通过 app 外部 template 标签自定义的 tmp3 组件</h4>
</template>

2、外部Vue组件注册

（1）先定义一个组件zj.vue

//html模板部分
<template>
    <h1>你好lhj！</h1>
</template>

//js代码部分
<script>
    export default {
        name: "zj"
    }
</script>

//css样式部分
<style scoped>
</style>

（2）在需要的页面内导入组件zj.vue

import zj from "./components/zj"

（3）Vue.component()注册组件

Vue.component("zj",zj)

二、局部注册

全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中这造成了用户下载的 JavaScript 的无谓的增加。

局部组件定义在vue实例内部，该组件只能在vue实例控制范围内才能使用，在其子组件中不可用，局部注册组件为 components 属性，它的属性值是一个对象。

1、代码内部嵌入

export default{
  name: 'App',
    data(){
      return{
          name:"lhj"
      }
    },
    components:{
      "temp5": {
                 template:"<h1>局部组件temp5</h1>"
               },
      "temp6":{
                 template:"<h1>局部组件temp6</h1>"
              }
            }
      })

HTML页面

<div>
    <temp5></temp5>
</div>

2、外部Vue组件注册

(1)在需要的页面内导入已经定义好的组件zj.vue

import zj from "./components/zj"

（2）components 属性局部注册

export default{
  name: 'App',
    data(){
      return{
          name:"lhj"
      }
    },
    components:{
      "temp7": zj       //键值对的键为自定义名字，值为引入的组件名字
            }
      })

HTML页面

<div>
    <temp7></temp7>
</div>

当然，也可以不自定义组件的名字，如下所示：

components:{ zj }       //不自定义组件的名字

HTML页面

<div>
    <zj></zj>
</div>