一、组件的分类

组件可以分类为：全局组件和局部组件。

 

1、全局组件

全局组件可以在所有的vue实例中使用。使用Vue.component定义全局组件。

vue-组件（分类）_html

 

2、局部组件

局部组件只能在当前vue实例中使用。使用Vue中的components选项定义局部组件。

vue-组件（分类）_Vue_02

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>定义组件</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8 </head>
 9 <body>
10 
11     <div id="hello">
12         <!-- 全局组件 -->
13         <hello></hello>        
14         <yaya></yaya>        
15         <!-- 局部组件 -->
16         <my-world></my-world>        
17     </div>
18 
19     <script>
20         //自定义组件 方式1：使用组件构造器定义组件
21         //第一步：使用Vue.extend创建组件构造器
22         var MyComponent=Vue.extend({
23             template:'<h3>HelloWorld</h3>'
24         })
25         //第二步：使用Vue.component创建组件
26         Vue.component('hello',MyComponent)
27 
28 
29         //自定义组件 方式2：直接创建组件
30         Vue.component('yaya',{    //该方法定义的组件为全局组件
31             template:'<h2>yaya是个小可爱</h2>'
32         })
33 
34         //vue实例
35         let vm = new Vue({    //vm其实也是一个组件，是根组件Root
36             el:'#hello',    
37             components:{    //定义局部组件
38                 'my-world':{
39                     template:'<h1>你好，我是你自定义的局部组件，只能在当前vue实例中使用</h1>'
40                 }
41             }
42         });
43     </script>
44 </body>
45 </html>