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

[TOC] >[success] # 全局組件 ~~~ 1.局部組件只能在指定創建的Vue對象中使用 2.使用的時候使用components 調用局部組件 ~~~ >[danger] ##### 創建組件步驟 ~~~ 1.定義組件； 2.注冊組件； 3.使用組件 ~~~ >[danger] ##### 組件的命名規則 ~~~ 1.注冊件名用了駝峰命名，則在引用組件的時候，需要把大寫的駝峰改為小寫的字母，同時，兩個單詞之前，使用 - 鏈接； 2.如果不使用駝峰,則直接拿名稱來使用即可; 3.為什么駝峰不支持因為html不區分大小寫 ~~~ >[danger] ##### 意點 ~~~ 1.組件和 Vue 實例類似，基本可以使用其所有內容（data、computed、 methods）； 2.與 Vue 實例不同的是，data 是函數，輸入需要 return ~~~ >[info] ## 局部組件的寫法 ~~~ 1.在創建的vue實例中添加components，在components注冊組件 ~~~ >[danger] ##### 局部組件寫法 -- components ~~~ <!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> <my-Com2></my-Com2> </div>  <template id="my-com"> <h1>全局組件</h1> </template> <script> // 創建變量對象 let myCom = { template:'#my-com', }; var vm = new Vue({ el: '#app', components:{ // 在外部聲明變量，使用代碼簡潔 myCom, myCom2:{ template:"<h2>組件二號</h2>" } } }); </script> </body> </html> ~~~