component -- 使用全局組件 · Vue&&TypeSprict--基礎總結

[TOC] >[success] # 全局組件 ~~~ 1.它們在注冊之后可以用在任何新創建的 Vue 根實例全局組件 ~~~ >[danger] ##### 創建組件步驟 ~~~ 1.定義組件； 2.注冊組件； 3.使用組件 ~~~ >[danger] ##### 組件的命名規則 ~~~ 1.注冊件名用了駝峰命名，則在引用組件的時候，需要把大寫的駝峰改為小寫的字母，同時，兩個單詞之前，使用 - 鏈接； 2.如果不使用駝峰,則直接拿名稱來使用即可; 3.為什么駝峰不支持因為html不區分大小寫 ~~~ >[danger] ##### 難點 ~~~ 1.組件和 Vue 實例類似，基本可以使用其所有內容（data、computed、 methods）； 2.與 Vue 實例不同的是，data 是函數，輸入需要 return ~~~ >[info] ## 三種全局組件的寫法 ~~~ 1.第一種使用 'Vue.extend' （跟本不用了解） 2.第二種直接使用 'Vue.component' 3.第三種和第二種基本一致，只不過將定義模板提取出來 ~~~ >[danger] ##### Vue.extend -- 基本不用寫法 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app">  <my-Com></my-Com> </div> <script> // 創建全局組件 var com = Vue.extend({ template:'<h3>全局組件</h3>' }); // 注冊全局組件 Vue.component('myCom',com); var vm = new Vue({ el: '#app', }); </script> </body> </html> ~~~ >[danger] ##### Vue.component -- 正常使用 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app">  <my-Com></my-Com> </div> <script> // 創建，注冊全局組件一步到位 Vue.component('myCom',{ template:'<h1>全局組件</h1>' }); var vm = new Vue({ el: '#app', }); </script> </body> </html> ~~~ >[danger] ##### 第二種升級版本 -- 提出template ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app">  <my-Com></my-Com> </div>  <template id="my-com"> <h1>全局組件</h1> </template> <script> // 創建，注冊全局組件一步到位 Vue.component('myCom',{ template:'#my-com' }); var vm = new Vue({ el: '#app', }); </script> </body> </html> ~~~