Vue組件開發(fā)
所謂組件化齐邦，就是把單個(gè)頁(yè)面拆分成多個(gè)組件，每個(gè)組件依賴的 CSS第租、JS措拇、template、等資源放在一起開發(fā)和維護(hù)
Vue在組件中給了兩種組件形式 全局組件 與 局部組件
全局組件
HTML部分：
<body>
<div id="app">
<!-- 使用組件 -->
<Top></Top>
</div>
</body>
JS部分：
Vue.component("Top",{
template:`<header>這是{{msg}}</header>`,
data:function(){
return{
msg:"頂部"
}
}
})
new Vue({
el:"#app",
})
顯示效果：
這是頂部
全局注冊(cè)語(yǔ)法：Vue.component（"組件名"慎宾，定義組件）
定義組件是一個(gè)對(duì)象有該組件自己的template丐吓、data、mothods等等
注意：
1趟据、組件的data屬性是一個(gè)函數(shù)return的一個(gè)對(duì)象
2券犁、Vue.componentd（注冊(cè)組件）一定要在所有new Vue（）創(chuàng)建實(shí)例前
3、如果單獨(dú)定義組件要在注冊(cè)組件之前 先要定義了才可以注冊(cè)
可以單獨(dú)定義組件
如下
<body>
<div id="app">
<!-- 使用組件 -->
<Top></Top>
</div>
</body>
<script src="../../vue.js"></script>
<script>
//定義組件
let Top={
template:`<header>這是{{msg}}</header>`,
data:function(){
return{
msg:"頂部"
}
}
}
//全局注冊(cè)組件
Vue.component("Top",Top)
new Vue({
el:"#app",
})
</script>
局部組件
HTML部分：
<body>
<div id="app">
<!-- 使用組件 -->
<Top></Top>
<Bottom></Bottom>
</div>
</body>
JS部分：
let Top={
template:`<header>這是{{msg}}</header>`,
data:function(){
return{
msg:"頂部"
}
}
}
Vue.component("Top",Top)
let Bottom={
template:`<header>這是{{msg}}</header>`,
data:function(){
return{
msg:"底部"
}
}
}
new Vue({
el:"#app",
components:{//注冊(cè)局部組件
// "Bottom":Bottom 可簡(jiǎn)寫為Bottom
Bottom
}
})
顯示效果：
這是頂部
這是底部
全局組件與局部組件的區(qū)別
局部組件只能在他所在的new Vue（）的實(shí)例作用域使用
如bottom就只能在#app中使用 全局組件可以在任何vue 實(shí)例作用域中使用
注意 注冊(cè)組件 Vue.component() 一定要在所有new Vue（）之前
組件引用外部模板（兩種）
使用外部模板的好處 可以提高復(fù)用性
第一種：
HTML部分：
<body>
<div id="app">
<!-- 使用組件 -->
<Top></Top>
<Outside></Outside>
<Bottom></Bottom>
</div>
</body>
<!-- 外部模板 -->
<template id="outside">
<div>
這是{{msg3}}模板
</div>
</template>
JS部分：
//定義組件
let Outside = {
template:"#outside",//選擇外部模板
data:function(){
return{
msg3:"外部"
}
}
}
//全局注冊(cè)組件
Vue.component("Outside",Outside)
let Top={
template:`<header>這是{{msg}}</header>`,
data:function(){
return{
msg:"頂部"
}
}
}
Vue.component("Top",Top)
let Bottom={
template:`<header>這是{{msg}}</header>`,
data:function(){
return{
msg:"底部"
}
}
}
new Vue({
el:"#app",
components:{//注冊(cè)組件
// "Bottom":Bottom 可簡(jiǎn)寫為Bottom
Bottom
}
})
顯示效果：
這是頂部
這是外部模板
這是底部
這里我把外部組件以全局的方式注冊(cè)了組件 當(dāng)然也可以用局部的方式來(lái)注冊(cè)組件
第二種：
將第一種HTML中的
<template id="outside">
<div>
這是{{msg3}}模板
</div>
</template>
變更為
<script type="x-template" id="outside">
<div>
這是{{msg3}}模板
</div>
</script>
其余不變也能達(dá)到同樣的目的
顯示效果：
這是頂部
這是外部模板
這是底部
