淺談Vue下的components模板

淺談Vue下的components模板
在咱們愈來愈深刻Vue時，咱們會發現咱們對HTML代碼的工程量會愈來愈少，今天咱們來談談Vue下的 components模板的 初步使用方法與 應用

咱們先來簡單的寫一段components代碼
(局部方法創造模板)

<div id="app">
<haha></haha>
</div>

/*
這是最簡單經常使用的一種創造模板方法，局部方法創造模板
要注意,局部模板 的做用範圍 只在 相對的vue對象 範圍內 
好比 這個例子, <haha></haha>的範圍 只在 <div id="app"> </div>內
由於 haha 掛載在 vm的components下 而 vm掛載的 對應節點是 id=app的 div上


*/
let vm = new Vue({
el:"#app",
data:{
},
components:{
"haha":{
template:"<div>哈哈哈<div>"
}
}
});

 

(共有模板/全局模板)，全局模板 顧名思義 確定是 放在哪裏都能用

<div id="app">
<hehe></hehe>
</div>


//這裏使用Vue.component原型方法來創造
Vue.component(
"hehe",template:"<div>呵呵呵<div>"
);

let vm = new Vue({
el:"#app",
data:{
},
components:{
//這裏則不須要添加,由於 互不影響
}
});

其餘方法：

<div id="app">
<xixi></xixi>
</div>

let xixi={
template:"<div>嘻嘻嘻<div>"
}

let vm = new Vue({
el : "#app",
data{
},
components:{
xixi
}

});

(模板的繼承)，全局模板 顧名思義 確定是 放在哪裏都能用

/*
咱們來說個最簡單的 父親，兒子 ，孫子的 例子
要注意如下幾點：
1.先實例化對象vm
2.造出parent模板,並掛載在 vm的 conponents 下
3.造出 son 模板 並 掛載 在 父級 parent 的conponents下，並在 父級template屬性中 包裹住本身的 模板名標籤 ；同理 造出孫子標籤
4.在HTML節點中添加 目標 根節點
（節點的順序必定要書寫正確）
*/
<div id="app">
<parent></parent>
</div>

//建立 孫子 模板
let grendson = { 
template:"<div>孫子</div>"
}

//建立 兒子 模板
let son= { 
template:"<son>兒子<grendson >孫子</grendson ></son>"
components:{
grendson 
}
}

//建立 父親 模板
let parent = { 
template:"<div>父親<son></son></div>"
components:{
son
}
}
//實例化vm對象
let vm = new Vue({
el:"#app",
data:{
},
components:{
parent
}
});

相信不少人在剛接觸前端或者中期時候總會遇到一些問題及瓶頸期，如學了一段時間沒有方向感或者堅持不下去一我的學習枯燥乏味有問題也不知道怎麼解決，對此我整理了一些資料 喜歡個人文章想與更多資深大牛一塊兒討論和學習的話 歡迎加入個人學習交流羣907694362