vue.js组件学习（上）
組件是vue.js中非常重要的一部分，打個比方，會用組件得人喝著茶就寫完的頁面，不會用的代碼打到手抽筋也未必完的成。
首先何為組件
組件可以封裝重用的代碼，擴(kuò)展HTML元素，更高的說組件是自定義元素。
組件化的html
寫入vue.js的基本結(jié)構(gòu)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <body><div id="app"></div><script src="./../vue.js"></script><script>var vm = new Vue({el:"#app", })</script> </body> </html>然后實(shí)例new中加入components 組件
components:{ child } //注冊局部組件在id=app中添加<child></child>
實(shí)例化一個child對象，里邊添加模板組件template，然后添加內(nèi)容為
template:"<div class="child">children</div>" //這里的模板會替代child這樣我們就可以在后臺發(fā)現(xiàn)多出來一個class名為child的標(biāo)簽，頁面內(nèi)容為children
可我們想組建出多個該怎么弄呢？
只需要在我們在components組件中加入childSibling
components:{ child，childSibling }然后如同上邊一樣實(shí)例一個childSibling對象那樣，然后在id="app"中再添加一個<child-sibling>自定義標(biāo)簽，這樣我們就可以得到兩個標(biāo)簽了。這里要注意這里的命名轉(zhuǎn)換
創(chuàng)建子組件
首先，我們應(yīng)實(shí)例化一個子組件son
var son = {template:"<div>這是子元素</div>" }然后我們要在目標(biāo)父組件中添加components組件，里邊寫入這個son，再然后在template中添加<son></son>
template:"<div><son></son</div>"這樣我們就完成了html的組件化，當(dāng)然實(shí)際應(yīng)用不可能這么簡單，不過都是以此類推的。
從父元素中獲取數(shù)據(jù)
如果我們用常規(guī)的方法獲取data里數(shù)據(jù)添加到模板里會報錯，這時就用到props，這個屬性是用來聲明子組件預(yù)期的數(shù)據(jù)，我們可以通過這個方法來得到data里的數(shù)據(jù)。
聲明子組件預(yù)期的數(shù)據(jù)
props:["預(yù)期數(shù)據(jù)"]綁定data數(shù)據(jù),假設(shè)父元素為<ele>
data：{數(shù)據(jù)："111" } <ele v-bind 預(yù)期數(shù)據(jù)="數(shù)據(jù)" ></ele>這樣我們在組件中添加預(yù)期數(shù)據(jù)就可得到data里的數(shù)據(jù)內(nèi)容了
還有很多這樣的方法可以參照官網(wǎng)進(jìn)行操作https://cn.vuejs.org/v2/guide...
總結(jié)
以上是生活随笔為你收集整理的vue.js组件学习（上）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SCCM2012SP1---配置客户端发
- 下一篇： html5倒计时秒杀怎么做,vue 设