vue 组件-组件定义的4种方式

一、组件命名的方式

　　①kebab-case，单词之间采用  - （短横线）连接，例如：my-component ，在DOM中使用时，<my-component ></my-component >

　　②PascalCase，驼峰式名称，单词之间，首字母大写，例如：MyComponent，但是在DOM中使用时，必须更改为，<my-component ></my-component >，<MyComponent></MyComponent>是识别不了的。

二、全局注册

①通过Vue.extend()和Vue.component()注册

 1     // 方式1
 2     var tmp1 = Vue.extend({
 3         template: "<p>通过 Vue.extend 创建的 tmp1 组件</p>"
 4     });
 5     Vue.component("tmp1", tmp1);
 6 
 7 
 8     // 方式2
 9     Vue.component("tmp2", Vue.extend({
10         template: "<p>通过 Vue.extend 创建的 tmp2 组件</p>"
11     }));

②通过Vue.component()字面量注册

1     Vue.component("tmp3", {
2         template: "<h3>通过字面量方式创建的tmp3组件</h3>"
3     });

③通过<template id="tmp1"> 方式注册

js部分：

1     Vue.component("tmp4", {
2         template: "#template1"
3     });

HTML部分：

1 <template id="template1">
2     <h4>这是通过 app 外部 template 标签自定义的 tmp4 组件</h4>
3 </template>

三、定义局部组件

局部组件定义在vue实例内部，该组件只能在vue实例控制范围内才能使用

JS部分：

 1     var app2 = new Vue({
 2         el: "#app2",
 3         components: {
 4             "temp5": {
 5                 template: "<h1>app2 的局部组件 h1 </h1>"
 6             },
 7             "temp6":{
 8                 template:"<h2>app2 的局部组件 h2 </h2>"
 9             }
10         }
11     });

HTML部分：

1     <div id="app">
2         <!-- 在这里使用app2注册的局部组件会报错 -->
3         <!-- <temp5></temp5> -->
4     </div>
5 
6     <div id="app2">
7         <temp5></temp5>
8     </div>

如果在app中使用了temp5组件会报以下警告：

1 [Vue warn]: Unknown custom element: <temp5> - did you register the component correctly? For recursive components, make sure to provide the "name" option.