一、組件的分類
組件可以分類為：全局組件和局部組件。
1、全局組件
全局組件可以在所有的vue實例中使用。使用Vue.component定義全局組件。
2、局部組件
局部組件只能在當前vue實例中使用。使用Vue中的components選項定義局部組件。
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>
二、組件中存儲數據
組件中存儲數據，使用data實現。
