vue組件之間的傳值
1.父向子傳值----通過poprs屬性
父組件：
1.png
2.png
###父組件（占位符）上通過：屬性名="屬性值"來傳給子組件
<home :ll='layout' :ll2='"qqqq"'></home>
###子組件通過props來接受可以為數(shù)組或者對(duì)象
//方法一
props:[' ll','ll2']
//方法二
props: {
ll: {type: String,default:'qqqqqq' },
ll2:{type:String,required:true}
},
2.子向父?jìng)髦?---通過子級(jí)觸發(fā)父級(jí)的事件攜帶參數(shù)來傳值
父組件：
4.png
6.png
子組件：
3.png
5.png
###父組件中
//1.標(biāo)簽上添加觸發(fā)函數(shù)欢策。例如：@ff="show"
//2.在methods中定義函數(shù)show
<home @ff='show'></home>
methods:{
show(qq){
console.log('接收子組件的值',qq);
this.fhome=qq
}
}
###子組件中
//1.標(biāo)簽上添加觸發(fā)函數(shù)袖瞻。例如：@click="tofather"
//2.在methods中定義函數(shù)tofather
//3.在函數(shù)tofather中，，通過this.$emit()來觸發(fā)父組件中的ff函數(shù)找默，且攜帶闡述，以此來達(dá)到參數(shù)的傳遞循榆，例如：this.$emit('ff','hh')
<button @click="tofather">home=>layout傳值</button>
methods:{
tofather(){
this.$emit('ff',"hh")
},
}
3.非父子之間的傳值---通過bus中間人 （可定義一個(gè).js文件捅儒，也叫事件總線）
注意：使用此方法傳值的兩個(gè)組件必須是同時(shí)存在（其中一個(gè)組件不能銷毀，不能是通過漏油的方式加載）
A組件傳值到B組件
方法一：bug中間人直接在main.js里面注冊(cè) 全局注冊(cè)
main.js ：聲明一個(gè)新的Vue實(shí)例對(duì)象铐达，并且掛載到Vue的原型上
7.png
組件A（傳參方）：A組件的點(diǎn)擊事件岖赋。讓Bus.$emit()觸發(fā)一個(gè)mp的事件并攜帶參數(shù)
8.png
組件B（接受方）：B組件通過Bus.$on（）來監(jiān)聽mp事件的是否觸發(fā)。并接收參數(shù)
9.png
方法一：bug中間人在自定義一個(gè).js文件
10.png
4.vuex中數(shù)據(jù)的共享
4.1.state中的數(shù)據(jù) ======>store中的數(shù)據(jù)倉庫
介紹：?jiǎn)我粻顟B(tài)樹 > 用一個(gè)對(duì)象包含了所有應(yīng)用層級(jí)的狀態(tài)瓮孙，作為唯一的數(shù)據(jù)源 > 利于我們能夠直接地定位任一特定的狀態(tài)片段唐断，在調(diào)試的過程中也能輕易地取得整個(gè)應(yīng)用狀態(tài)的快照
在組件中可以通過：
###方法一 直接獲取
$store.state.數(shù)據(jù)名
###分離文件后的方法
//文件名：分離出來的文件的名选脊。
//數(shù)據(jù)名：state里面的鍵
$store.state.文件名.數(shù)據(jù)名
###方法二 通過計(jì)算屬性 computed
//1.先引入，脸甘，恳啥，將數(shù)據(jù)以計(jì)算屬性的方式。當(dāng)成自己的data值使用
import {mapState} from "vuex";
//在computed中展開
computed:{
...mapState({ 自定義名稱: ["數(shù)據(jù)名"] }) //取別名
//直接使用
...mapState( ["數(shù)據(jù)名"] )
}
//例如：
computed:{
...mapState({ qq: ["login"] })
}
###分離文件后的方法
//1.先引入丹诀，钝的，，將數(shù)據(jù)以計(jì)算屬性的方式铆遭。當(dāng)成自己的data值使用
import {mapState} from "vuex";
//在computed中展開
computed:{
...mapState({ 自定義名稱: ["文件名"] })
}
//例如：
computed:{
...mapState({ aa: ["user"] })
}
###另一寫法
computed:{
...mapState({
add: state => state.add,
counts: state => state.counts
})
}
4.2.mutations的操作=======>更改 Vuex 的 store 中的狀態(tài)的唯一方法
不能寫異步操作
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation
每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)
這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方硝桩，并且它會(huì)接受 state 作為第一個(gè)參數(shù)
你需要以相應(yīng)的 type 調(diào)用 store.commit 方法
1. payload (提交載荷))
你可以向 store.commit 傳入額外的參數(shù)，即 mutation 的 載荷（payload）
載荷應(yīng)該是一個(gè)對(duì)象疚脐，這樣可以包含多個(gè)字段
規(guī)則：
vuex中的store中的狀態(tài)是響應(yīng)式的亿柑，那么當(dāng)我們變更狀態(tài)的時(shí)候，監(jiān)視狀態(tài)的Vue
組件也會(huì)自動(dòng)更新棍弄，這也意味著Vuex中的mutation也需要與使用Vue一樣遵守一些注意事項(xiàng)
1. 最好提前在你的store中初始化所有所需屬性
2. 當(dāng)需要在對(duì)象上添加新屬性時(shí)望薄，你應(yīng)該用新對(duì)象替換老對(duì)象
Mutation必須是同步函數(shù)
一條重要的原則就是要記住 mutation 必須是同步函數(shù)
為什么： 如果mutation是異步函數(shù)，那么回調(diào)函數(shù)的執(zhí)行難以控制呼畸，這就導(dǎo)致狀態(tài)的改變不可追蹤
本質(zhì)： 實(shí)質(zhì)上任何在回調(diào)函數(shù)中進(jìn)行的狀態(tài)的改變都是不可追蹤的
執(zhí)行代碼：
###vuex中的寫法：
mutations：{
函數(shù)名（state痕支，'傳參'）{
執(zhí)行代碼塊。蛮原。卧须。
}
}
###方法一：直接觸發(fā)：
//組件通過$store.commit()
//commit：同步操作，寫法：this.$store.commit('mutations方法名',參數(shù)值)
###方法二：通過導(dǎo)入mapMutattions函數(shù)儒陨。將需要的Mutattions函數(shù)花嘶，映射為當(dāng)前組件的methods方法
//1.引入
import {mapMutations} from "vuex";
methods：{
...mapMutations(['ADD']，['ADD1'])
this.ADD('參數(shù)')
}
###方法二
methods：{
...mapMutations({
'ADD': 'ADD'
})
this.ADD('參數(shù)')
}
4.3.actions 的操作=======>用于處理異步操作
1. action提交的是mutation蹦漠，而不是直接變更狀態(tài)
2. action可以包含任意異步操作
3. Action 函數(shù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對(duì)象椭员，因此你可以調(diào)用 context.commit 提交一個(gè) mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters
分發(fā)Action
Action 通過 store.dispatch 方法觸發(fā)
Actions 支持同樣的載荷方式和對(duì)象方式進(jìn)行分發(fā)
###vuex中寫法：
actions：{
函數(shù)名：(context笛园，'傳參'){//context相當(dāng)于當(dāng)前的vuex.store實(shí)例對(duì)象
異步函數(shù)（（）=>{
context.commit('mutations的執(zhí)行函數(shù)')
}）
}
}
###使用方法一
//將 this.commonActionGet() 映射為 this.$store.dispatch('事件函數(shù)名'隘击，'傳參')
methods:{
this.$store.dispatch('事件函數(shù)名'，'傳參')
}
###使用方法二：通過導(dǎo)入mapActions函數(shù)研铆。將需要的actions函數(shù)埋同，映射為當(dāng)前組件的methods方法
//引入計(jì)算屬性
import {mapActions} from "vuex";
methods：{
...mapActions(['事件1', '事件2', '事件2', '事件4']),
觸發(fā)事件函數(shù)(){
this.事件1()
this.事件2()
this.事件2()
}
}
// 第二種方式
methods：{
...mapActions({
'自定義名稱1': '事件1',
'自定義名稱2': '事件2',
'自定義名稱3': '事件3',
'自定義名稱4': '事件4'
}),
觸發(fā)事件函數(shù)(){
this.自定義名稱1()
this.事件2()
}
}
4.4. getter的操作 =======>用于用戶地store中的數(shù)據(jù)進(jìn)行加工處理形成新的數(shù)據(jù)
? 1.Getter可以對(duì)Store中已有的數(shù)據(jù)加工處理形成新的數(shù)據(jù)。類似Vue的計(jì)算屬性
? 2.store中數(shù)據(jù)發(fā)生變化棵红，Getter的數(shù)據(jù)也會(huì)跟著變化
###vuex中：
getter:{
事件名:state =>{
return state.變量名
}
}
###使用方法一：直接使用
this.$store.getter.名稱 //名稱為：getter的事件名
###使用方法二：通過導(dǎo)入mapGetters函數(shù)凶赁。將需要的getters函數(shù)，映射為當(dāng)前組件的computed方法
//引入
improt {mapGetters} from "vuex"
computed：{
...mapGetters(['名稱'])//名稱為：getter的事件名
}
4.5.modules 的操作=======>用于vuex文件的分離。便于維護(hù)
由于使用單一狀態(tài)樹哟冬，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象楼熄。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫
所以：Vuex 允許我們將 store 分割成模塊（module）浩峡。每個(gè)模塊擁有自己的 state可岂、mutation、action翰灾、getter缕粹、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割
命名空間
可以通過添加 namespaced: true 的方式使其成為帶命名空間的模塊。當(dāng)模塊被注冊(cè)后纸淮，它的所有 getter平斩、action 及 mutation 都會(huì)自動(dòng)根據(jù)模塊注冊(cè)的路徑調(diào)整命名
若需要在全局命名空間內(nèi)分發(fā) action 或提交 mutation，將 { root: true } 作為第三參數(shù)傳給 dispatch 或 commit 即可
1.引入單文件
2.在modules中注冊(cè)單文件
11.png
在單文件中寫入相關(guān)代碼
12.png
訪問單文件的state中的值：分離文件后的方法
//文件名：分離出來的文件的名咽块。
//數(shù)據(jù)名：state里面的鍵
$store.state.文件名.數(shù)據(jù)名
訪問單文件的的方法：直接訪問绘面，vuex會(huì)自動(dòng)的進(jìn)行查找，所以在方法命名時(shí)不能重復(fù)
