Vue 元件
為什麼需要元件？
- 避免單一檔案過大
- 在很多檔案當中都可以拉出來重複使用、管理方便
元件定義方式
全域註冊
全域註冊： 不管有沒有使用到這個元件，只要用到全域註冊它都會直接載入，因此全域註冊會把沒用到的組件也一起載進來，會拖累載入速度。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| // 全域註冊
<div id=”app”>
<global-component></global-component>
</div>
<script>
Vue.component("global-component", {
template: `<div>{{text}}</div>`,
data(){
return{
text:'我是全域註冊'
}
}
});
const app = new Vue({
el: "#app"
});
</script>
|
區域註冊
因為全域註冊的缺點，想當然爾就會出現解決的方案啦！
區域註冊：針對特定的實體設計就能夠用區域註冊，註冊在需要它的組件當中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| //區域註冊
<div id=”app”>
<gloval-component></gloval-component>
</div>
<script>
const app = new Vue({
el: "#app",
components:{
'gloval-component' :{
template: `<div>{{text}}</div>`,
data(){
return {
text:'我是局部註冊'
}
}
}
}
});
</script>
|
元件資料傳遞
進入元件後所有 data 都必須用 function return。
1
2
3
4
5
6
7
8
9
10
11
| //如果元件的資料不用 function 回傳會讀取不到資料喔！
Vue.component('名稱', {
template: `<div>{{text}}</div>`,
data() {
return {
data: {
text: ''
}
}
}
})
|