理解
Vue中有個非常重要的核心思想航夺，就是組件化蕉朵，組件化是為了代碼復用
什么是組件化
組件化，就像一個電腦主機里的主板阳掐，有內存條的插口始衅，有硬盤冷蚂，光驅等等的插口，我們的項目汛闸，就像一個電腦主機蝙茶，通過各種組件化的模塊（硬盤、內存等）诸老，來拼合成一個完整的電腦隆夯。
（圖片來源 vue-組件化應用構建）
如圖，每一個塊都是一個組件别伏，由許許多多的組件拼合而成蹄衷，可以無限的嵌套下去
組件化的好處
- 模塊復用，提高效率厘肮，讓重復的代碼只寫一遍愧口。
- 預留個性化設置，可以保證模塊类茂，既通用调卑，又可變。
- 提高可維護性大咱，如果一個項目多個頁面使用了同一個組件（例如消息彈框）恬涧，如果修改彈框樣式，只需要修改這個模塊即可碴巾。
寫法
cli模式
組件部分
<template>
<div></div>
</template>
<script>
export default {
name:"myAlert"
};
<style></style>
使用者部分
<template>
<div>
<myAlert></myAlert> <!-- 實例中使用組件 -->
</div>
</template>
<script>
import myAlert from '@/components/alert.vue';//導入自己寫的組件
export default {
components:{myAlert}//在這個vue實例中注冊組件
};
</script>
<style></style>
引入vue.js模式
// 定義名為 todo-item 的新組件
Vue.component('myAlert', {
template: '<div>這是一個彈框</div>'
})
var app = new Vue(...)
html部分使用
<div>
<myAlert></myAlert>
</div>
組件傳值
Vue中存在的組件之間傳值的方案如下
父=>子
props
子組件中聲明props,父組件往對應的props值中傳遞
$refs
父組件使用this.$refs.組件名.變量來選中子組件并修改子組件的內容
$children
父組件使用this.$children[0].變量來選中并修改子組件的內容
需要注意的是：由官網vm.$children得知
$children 并不保證順序溯捆，也不是響應式的
所以一般不建議使用此方法來進行傳值，因為不能很穩(wěn)定的找到指定組件的實例厦瓢，除非這個頁面只有一個子組件
另外提揍，此例中，this.$children[0]不是響應式的this.$children[0].變量是響應式的煮仇。
子=>父
$emit
此處為觀察者模式
- 子組件調用
this.$emit('confirm','點擊了確定')來派發(fā)confirm事件 - 父組件中
<myAlert @confirm='successCallback'></myAlert>來監(jiān)聽事件;
注意：此處為劳跃，誰派發(fā)就是誰監(jiān)聽，也就是說浙垫，confirm事件的派發(fā)者和監(jiān)聽者刨仑，都是myAlert組件，myAlert組件監(jiān)聽完畢后將調用父組件的successCallback回調事件夹姥，當然這個監(jiān)聽的事件名和觸發(fā)的事件名都是可以自定義的杉武。
兄弟組件之間互相傳值
使用公共節(jié)點搭橋
- 使用公共父級組件
$parents或者$root
//組件一
this.$parents.$on('foo',(e)=>{
console.log(e);//此處e為$emit時傳入的值
})
//組件二
this.$parents.$emit('foo','bar');//控制臺輸出bar
- 使用任意兩個組件之間傳值的方案 點擊查看
跨輩分傳值
概念，所謂跨輩分傳值辙售，就是
祖輩->父輩->子輩->孫輩->...
其中轻抱，垮了一個輩分或多個輩分的就是跨輩分傳值，例如旦部，祖輩及孫輩
provide/inject
由于多級嵌套祈搜，使用props傳遞顯然是不現(xiàn)實的
針對這種情況较店，vue提供了 provide/inject兩個API來完成這件事
- 祖輩使用
provide聲明一個變量 - 孫輩使用
inject來注入祖輩聲明的變量
寫法：
//祖輩
export default {
provide(){//此處可以傳入動態(tài)變量，與data類似
return {
componentYeye:this
}
},
data(){
return {
yeyedeBianliang:'爺爺的變量'
}
}
}
//孫輩
export default {
inject:['componentYeye'],//此處為數組容燕，注入祖輩聲明的變量
mounted(){
console.log(this.componentYeye.yeyedeBianliang);//爺爺的變量
}
}
注意
- 此方法多用來制作組件庫時使用梁呈。
- 此方法不建議直接在孫輩修改祖輩的數據。因為這些數據可能在多個子組件中使用缰趋，如果要修改捧杉，應該調用祖輩組件變量的方法來修改陕见，與
vuex中建議變量修改都是用commit類似
使用任意兩個組件之間傳值的方案 點擊查看
任意兩個組件之間傳值
<a id='evert-components'></a>
原型掛載
所謂原型掛載秘血，就是在main.js中將公共變量，事件评甜，都掛在到Vue原型上
//main.js
Vue.prototype.$globalData = {}
Vue.prototype.$sayName = function(e){
console.log('我的名字是',e)
}
new Vue({...})
//組件一
Vue.prototype.$globalData.name='小明';
this.$sayName('小王');//我的名字是小王
//組件二
console.log(this.$sayName.name);//小明
this.$sayName('小王');//我的名字是小王
事件總線
所謂事件總線灰粮，就是在當前的Vue實例之外，再創(chuàng)建一個Vue實例來專門進行變量傳遞忍坷，事件處理粘舟，管理回調事件等
//main.js中
Vue.prototype.$bus = new Vue();
new Vue({...})
//組件一
this.$bus.$on('sayName',(e)=>{
console.log('我的名字是',e)
})
//組件二
this.$bus.$emit('sayName','小明');//我的名字是 小明
vuex
Vuex是Vue提供的一種，專門用來管理vue中的公共狀態(tài)佩研，事件等等柑肴。詳見 從0開始探究vue-公共變量的管理
