從“心”認識Vue（四）：元件的基本使用
阿新 • • 發佈：2021-01-25
從“心”認識Vue（四）：元件的基本使用
前言
學習vue的時候學完模板語法，上來就開始了腳手架，雖然上手快了點，但是感覺還是少了一點銜接，知識遇到了斷層，於是自己就再補了一點，理解起來比較順暢一些。
一、元件化是什麼？
vue的核心思想就是資料驅動和元件化，元件化作為vue的重要思想，就是將頁面分為多個元件，每個元件實現一個功能塊，可以讓我們的專案更方便的維護和管理，減少工作量，提高開發效率。
二、註冊元件
1.使用步驟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 3.使用元件-->
<!-- 元件必須掛載在Vue例項下，否則不生效-->
<comp></comp>
</ 2.步驟分析
- 1.呼叫Vue.extend()方法建立了一個元件構造器，傳入template寫入要顯示的html程式碼
- 2.呼叫Vue.component()方法註冊了一個全域性元件，並給它起元件的標籤名稱
- 3.元件必須掛載到Vue例項下
三、全域性元件與區域性元件
1.全域性元件
上面的例子就是在用全域性元件，全域性元件的意思就是在本頁面中所有的vue例項都可以使用這個元件。
如上面的例子，我再增加一個例項：
<div id="app">
<comp></comp>
</div>
<div id="app2">
<comp></comp>
</div>
再增加一個vue例項：
const app2 = new Vue({
el:"#app2"
})
結果：
結果可以看到頁面顯示兩個元件。
2.區域性元件
顧名思義，區域性元件將只能在某個vue例項下使用。
將上面的例子改成如下的程式碼：
const app = new Vue({
el:"#app",
data:{
},
// 2.註冊元件（區域性元件），只能在本例項中使用
components:{
comp:comp
}
})
const app2 = new Vue({
el:"#app2"
})
結果：
結果可以看到只顯示出來一個元件，而app2的例項雖然掛載了comp的元件但是沒有顯示出來。
總結
建立元件的步驟：
- 1.呼叫Vue.extend()建立元件構造器；
- 2.呼叫Vue.component()註冊元件，第一個引數是元件標籤名稱，第二個引數是元件；
- 3.將元件掛載到Vue例項下。
全域性元件與區域性元件
- 全域性元件頁面中所有vue例項都可以呼叫這個元件，語法是Vue.component(“元件標籤名”,元件名)
- 區域性元件只能在某個vue例項裡使用這個元件，語法時在vue例項裡與data，methods同級書寫components:{元件標籤名:元件}