[toc] ### 1. 使用Vue.extend來創建全局的Vue組件 1. 創建組件 2. 注冊組件 注意：如果使用Vue.component定義全局組件時，組件名稱使用了駝峰命名，則在引用組件的時候，需要把大寫的駝峰改成小寫的字母，同時，兩個單詞之間用`-`連接 ，如果不使用駝峰，則直接拿名稱來使用即可 ``` // 1. 使用Vue.extend來創建全局的Vue組件 var com1 = Vue.extend({ // 通過template屬性，指定了組件要展示的HTML結構 template: '<h3>這是使用Vue.extend創建的組件</h3>' }) // 2. 使用Vue.component('組件的名稱', 創建出來的組件模板對象) Vue.component('mycom1', com1); // 3. 創建Vue實例，使用模板 var vm = new Vue({ el: '#app' }) ``` 3. 一步注冊并創建組件 Vue.component(組件名，Vue.extend創件的組件(其中template就是要展示的HTML內容)) ``` Vue.component('mycom1', Vue.extend({ template: '<h3>這是使用Vue.extend創建的組件</h3>' })) ``` ### 2. 僅使用component創建 注意：不論是哪種方式創建出來的組件，組件的template屬性指向的模板內容，必須有且只能有唯一的一個根元素 ``` Vue.component('mycom2', { template: '<div><h3>1</h3><span>2</span></div>' }) ``` ### 3. template與Vue.component分離(推薦) 通過template元素，在外部定義的組件結構，這個方式，有代碼的智能提示和高亮，`template` 元素不需要放在Vue元素里 ``` <template id="temp1"> <h1></h1> <h4>推薦！</h4> </template> ``` ``` Vue.component('mycom3', { template: '#temp1' }) var vm = new Vue({ el: '#app' }) ``` ### 4. 通過對象字面量的形式，定義一個組件模板對象 ``` var login = { template: '<h1>1</h1> } Vue.component('mylogin', login); ```