什么是組件耸别？
vue中的組件其實就是頁面組成的一部分健芭，好比是電腦中的每一個元件（如硬盤，鍵盤秀姐，鼠標(biāo)）慈迈，它就是一個具有獨立邏輯或界面，同時又能根據(jù)規(guī)定的接口規(guī)則進(jìn)行相互融合省有，變成一個完整的應(yīng)用痒留。
頁面就是由一個個類似這樣的部分組成的，比如導(dǎo)航蠢沿，列表伸头，彈窗，下拉列表等搏予。頁面只不過是這些組件的容器熊锭，組件自由組合形成功能完整的界面，當(dāng)不需要某個組件雪侥，或者想要替換某個組件時碗殷，可以隨時進(jìn)行替換和刪除，而不影響整個應(yīng)用的運行速缨。
前端組件化的核心思路就是將一個巨大復(fù)雜的東西拆分成顆粒度合理的小東西锌妻。
使用組件的好處？
1旬牲、提高開發(fā)效率
2仿粹、方便重復(fù)使用
3、簡化調(diào)試步驟
4原茅、提升整個項目的可維護(hù)性
5吭历、便于協(xié)同開發(fā)
vue中的組件
vue中的組件是一個自定義標(biāo)簽，vue.js的編譯器為它添加特殊功能
vue中的組件也可以擴(kuò)展原生的html元素擂橘，封裝可重用的代碼
組件的基本組成：樣式結(jié)構(gòu)晌区，行為邏輯，數(shù)據(jù)
注冊組件
全局注冊
可以在任何模板中使用，使用之前要先注冊
語法：使用Vue.compontent(組件名朗若，選項對象)
組件名命名約定：駝峰恼五，烤串
在html中使用組件：使用烤串命名法
例如，注冊Vue.compontent('my-compontent',{}),使用的時候<my-compontent></my-compontent>
<div id="app">
<h2>自定義下拉框</h2>
<cus-list></cus-list>
<cus-list></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
// 全局注冊組件
Vue.component('cus-list',{
data(){
return {
}
},
template:`
<section>
<div>
<div>
<input type="text">
<input type="button" name="" value="">
<span></span>
</div>
</div>
</section>
`
})
new Vue({
el:"#app",
data:{
}
})
</script>
使用的時候哭懈，只要在頁面上召喚這個組件就可使用灾馒，并且可以復(fù)用。
局部注冊
在組件實例中通過選項對象注冊遣总，只在所注冊的作用域中使用
<div id="app">
<h2>自定義下拉框</h2>
<cus-list></cus-list>
<cus-list></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
new Vue({
el:"#app",
components:{
'cus-list':{
template:`
<section>
<div>
<div>
<input type="text">
<input type="button" name="" value="">
<span></span>
</div>
</div>
</section>
`
}
},
data:{
}
})
</script>
局部注冊的組件睬罗，只有在當(dāng)前實例的作用域中才可以使用，在作用域中也可以復(fù)用彤避，效果如下傅物。
父子組件間通信
父組件給子組件通信
父組件===》子組件（用props）
組件實例的作用域是孤立的夯辖，不能再子組件直接用父組件的數(shù)據(jù)琉预。
可以在組件上使用自定義屬性綁定數(shù)據(jù)，在組件中組要顯示的用props生命自定義屬性名蒿褂。
也就是記住一句話圆米，父組件給子組件傳值得時候，就是調(diào)用組件時給組件添加 一個屬性啄栓，然后在組件內(nèi)用props接收即可娄帖，組件內(nèi)根據(jù)屬性名即可使用。
<div id="app">
<h2>自定義下拉框</h2>
<cus-list btn-value="查詢"></cus-list>
<cus-list btn-value="搜索"></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
Vue.component('cus-list',{
data(){
},
props:['btnValue'],
template:`
<section>
<div>
<div>
<input type="text">
<input type="button" name="" :value="btnValue">
<span></span>
</div>
</div>
</section>
`
})
new Vue({
el:"#app",
data:{
}
})
</script>
頁面效果
子組件給父組件通信
子組件===》父組件
需要用到自定義事件昙楚，父組件用emit觸發(fā)父組件所關(guān)心的自定義事件。
1堪旧、在子組件中定義事件內(nèi)容<li v-for="item of list" @click="clickLi(item)">{{item}}</li>
2削葱、父組件中v-on自定義事件進(jìn)行接收v-on:receive="changeValue"
3、在觸發(fā)子組件事件的時候淳梦，emit("receive",item);
4析砸、父組件根據(jù)自定義事件進(jìn)行相應(yīng)反饋changeValue:function(value){this.val = value;}`
看如下案例，點擊input的時候爆袍，出現(xiàn)下拉列表框首繁，選中相應(yīng)的列表，列表內(nèi)容出現(xiàn)在input框中陨囊。
<div id="app">
<h2>自定義下拉框</h2>
<cus-list select-Value="搜索" v-bind:list="list1" >
</cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
// 全局注冊組件
Vue.component('cus-list',{
data(){
return {
selectShow:false,
val:''
}
},
props:['selectValue','list'],
template:`
<section>
<div>
<div>
<input type="text" @click="selectShow = !selectShow" :value="val">
<input type="button" name="" :value="selectValue">
</div>
<list-li :list="list" v-show="selectShow" v-on:receive="changeValue"></list-li>
</div>
</section>
`,
methods:{
changeValue:function(value){
this.val = value;
}
}
})
Vue.component('list-li',{
props:['list'],
template:`
<ul>
<li v-for="item of list" @click="clickLi(item)">{{item}}</li>
</ul>
`,
methods:{
clickLi:function(item){
this.$emit("receive",item);
}
}
})
new Vue({
el:"#app",
data:{
list1:['宋仲基','余文樂','鹿晗','陳小春','黃曉明','易烊千璽']
}
})
</script>
頁面效果
組件最基本的應(yīng)用就是如此弦疮，深入的應(yīng)用，就會發(fā)現(xiàn)很多剛好玩的東西蜘醋。
