vue组件通信
props/$emit：(常用)
比较常见的一种。父组件通过props向子组件传递数据，子组件通过$emit向父组件通信。单向数据流， 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为需要传递的参数，onchange绑定的父组件的事件
}
}
}
$parent和$children
provide和inject
父组件中通过provide来提供变量, 然后再子组件中通过inject来注入变量。(一般用于页面的刷新)，替代onload出现的刷新空白。
eventBus
事件总线，所有组件共用相同的事件中心，项目较大时慎用。
1）.初始化 --创建事件总线并导出
export const EventBus = new Vue();
2）.发送事件
<div>
<myComponentA></myComponentA>
<myComponentB></myComponentB>
</div>
import myComponentA from '...';
import myComponentB from '...';
export default{
components:{myComponentA ,myComponentB }
}
//myComponentB 发送事件
<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;
})
}
}
总结：在B组件中点击按钮，在A中相加
4）.移除监听
EventBus.$off('addition', {})
Vuex(常用)
状态管理模式
各个模块：
state:store中唯一数据源
getters：数据筛选和计算
mutations：改变state数据的唯一途径
actions：提交mutation改变状态，包含异步操作
modules：命名，将各个模块的状态分开定义和操作
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); //获取数据
localStorage.setItem(key,value) //存储数据
JSON.parse() / JSON.stringify()
