目錄
一.組件化
二.根組件
三.App.vue文件（單文件組件）的三個組成部分
四.普通組件的注冊和使用：
? ? ? ? 1.普通組件的創建
? ? ? ? 2.局部注冊
????????3.全局注冊
🧠 補充小技巧：
💡 關于組件名（第一個參數）：
一.組件化
? ? ? ? 一個頁面可以拆分成一個個組件，每個組件有著自己獨立的結構、樣式、行為。
? ? ? ? 好處：便于維護，利于復用→提升開發效率
? ? ? ? 組件分類：普通組件、根組件
二.根組件
????????整個應用最上層的組件，包裹所有普通小組件
三.App.vue文件（單文件組件）的三個組成部分
? ? ? ? 在VScode中安裝了vetur的情況下在.vue空白文件中，輸入vue然后回車就可以直接生成這三個結構
? ? ? ? 1.template：結構（在vue2中一個組件頁面的結構中有且只能有一個根元素）。
? ? ? ? 2.script：js邏輯。
? ? ? ? 3.style：樣式（可支持less，需要包）默認樣式是會影響全局的，使用scoped可以只限定在當前組件頁面中。
? ? ? ? 4.讓組件支持less? ? ? ? ?
? ? ? ? ? ? ? ? 使用前需要先安裝less包
yarn add less less-loader? ? ?
? ? ? ?
四.普通組件的注冊和使用：
? ? ? ? 1.普通組件的創建
? ? ? ? 下面這種情況是錯誤的，Vue2中有且只能有一個根元素，這個問題在Vue3中被解決
? ? ? ? 2.局部注冊
? ? ? ? ? ? ? ? 只能在注冊的組件中使用
? ? ? ? ????????在導入組件后，不使用是會報錯的。
????????3.全局注冊
? ? ? ? ? ? ? ? 所有組件內都能使用
| 部分 | 含義 |
|---|---|
'HelloWorld'（字符串） | 👉 組件名（Component Name）用來在模板中寫成 <HelloWorld> 標簽使用 |
HelloWorld（變量） | 👉 組件對象（Component Object）通常是 import HelloWorld from './components/HelloWorld.vue' 進來的 |
🧠 補充小技巧：
💡 關于組件名（第一個參數）：
-
推薦使用 多單詞（multi-word）命名，避免與 HTML 原生標簽沖突（比如
Button,Form等） -
可以使用 kebab-case 書寫（在 HTML 中自動轉小寫）：
Vue.component('hello-world', HelloWorld)這樣
<hello-world />也是合法的用法。
)
