props/$emit：(常用)
比較常見的一種。父組件通過props向子組件傳遞數(shù)據(jù)，子組件通過$emit向父組件通信。單向數(shù)據(jù)流， props只讀，不可被修改。
//父組件代碼示例
<myComponent :dataList='dataList'></myComponent>
<div>{{currentPage}}</div>
import myComponent from './....';
export default{
components:{myComponent},
data(){
return{
currentPage:1,
dataList:[...]
}
},
methods:{
onchange(index){
this.currentPage = index;
}
}
}
//子組件代碼示例
<div v-for="(item, index) in dataList" :key="index" @click="emitIndex(index)">{{item}}</div>
export default{
props:['dataList'],
methods:{
emitIndex(index){
this.$emit('onchange',index); //index為需要傳遞的參數(shù)，onchange綁定的父組件的事件
}
}
}
$parent和$children
provide和inject
父組件中通過provide來提供變量, 然后再子組件中通過inject來注入變量。(一般用于頁面的刷新)，替代onload出現(xiàn)的刷新空白。
eventBus
事件總線，所有組件共用相同的事件中心，項(xiàng)目較大時(shí)慎用。
1）.初始化 --創(chuàng)建事件總線并導(dǎo)出
export const EventBus = new Vue();
2）.發(fā)送事件
<div>
<myComponentA></myComponentA>
<myComponentB></myComponentB>
</div>
import myComponentA from '...';
import myComponentB from '...';
export default{
components:{myComponentA ,myComponentB }
}
//myComponentB 發(fā)送事件
<button @click="add"></button>
import {EventBus} from '...';
export default{
data(){
return{
num:1
}
},
methods:{
add(){
EventBus.$emit('addition',{num:this.num++})
}
}
}
3）.接收事件
//myComponentA 接收事件
<div>{{count}}</div>
import {EventBus} from '...';
export default {
data() {
return {
count: 0
}
},
mounted() {
EventBus.$on('addition', param => {
this.count = this.count + param.num;
})
}
}
總結(jié)：在B組件中點(diǎn)擊按鈕，在A中相加
4）.移除監(jiān)聽
EventBus.$off('addition', {})
Vuex(常用)
狀態(tài)管理模式
各個(gè)模塊：
state:store中唯一數(shù)據(jù)源
getters：數(shù)據(jù)篩選和計(jì)算
mutations：改變state數(shù)據(jù)的唯一途徑
actions：提交mutation改變狀態(tài)，包含異步操作
modules：命名，將各個(gè)模塊的狀態(tài)分開定義和操作
store.js
const state = {
msg:''
}
const mutations={
receiveMsg(state,payload){
state.msg = payload.msg
}
}
export default new Vuex.Store({
state,
mutations
})
localStorage sessionStorage(常用)
localStorage.getItem(key); //獲取數(shù)據(jù)
localStorage.setItem(key,value) //存儲(chǔ)數(shù)據(jù)
JSON.parse() / JSON.stringify()
