# 父子传参
# 父组件向子组件传参
父组件引用子组件通过v-bind(简写:
:src
)绑定值,子组件通过props获取
// 父组件
<template>
<child :message="message"></child>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
message: 'hello vue2.x'
}
}
}
</script>
// 子组件
<template>
<div>
<span>{{message}}</span>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
default: 'test'
}
}
}
</script>
# 子组件向父组件传参
在子组件中使用$emit绑定一个自定义事件, 当这个执行这个语句时,就会将参数传递给父组件
## vue2.x
// 父组件
<template>
count:{{num}}
<child :num="num" @addCount="addCount"></child>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
num: 100
}
},
methods:{
addCount(res) {
this.num = res
}
}
}
</script>
// 子组件
<template>
<div>
<button type="primary" @click="addCount">count++</button>
</div>
</template>
<script>
export default {
props: {
num: {
type: Number,
default: 0
}
},
methods:{
addCount() {
this.$emit('addCount', this.num + 1)
}
}
}
</script>
# eventBus
EventBus又称为事件总线,可以使用它来进行组件之间通信。其实和vuex还是有些类似的,相当于所有组件共用一个事件中心,这个事件中心用来管理事件,当我们需要用到的时候就向事件中心发送或者接受事件。通过共享一个vue实例,使用该实例的$on以及$emit实现数据传递。
## vue2.x
// eventBus.js
const eventBus = new Vue()
export default eventBus
// A 组件
import eventBus from './eventBus'
// 通过emit发送消息
eventBus.$emit('message')
// B组件
import eventBus from './eventBus'
// 通过$on接收消息
eventBus.$on('message', () => {
console.log('收到消息!')
})
// 组件销毁时需要解绑监听
beforeDestroy () {\
eventBus.$off('message')\
}
# VUEX
安装:npmx i vuex
状态管理工具,vuex简称五个部分state(状态仓库),getters(缓存依赖),mutations(同步操作),actions(异步操作),模块(modules)。
# vuex的五个核心模块
state
- 用来存储数据,变量
getters
- 监听state计算属性
- 有return值
mutations 同步方法
- 第一个值是state
- 第二个是参数
actions: 异步方法
- 第一个值是{dispatch,commit}
- dispatch (‘方法名’,值) 异步调异步
- commit (‘方法名’ ,值)异步调同步
- 第二个是参数
- 第一个值是{dispatch,commit}
modules: 区分模块
- namespaced:true //模块独立化
总结
- 前四个写在modules文件下的js中
- mutations可修改数据,actions改需调用mutations
- 同步不可调异步,异步可调同步
# 使用
commit同步操作:this.$store.commit('mutations方法名',值)
dispatch:异步操作,this.$store.dispatch('actions方法名',值)
模块独立需要在方法名前加上是那个文件的方法 (opens new window)
# 辅助函数 调用VUEX模块
- mapState
- 在computed中引入
- ...mapState({userData: state=>state.组件名.数据})
- mapGetters
- 在computed中引入
- ...mapGetters({state: '组件名/state'})
- mapMutations
- methods中引入
- ...mapMutations({fun:'组件名/fun'})
- mapAcations
- methods中引入
- ...mapAcations({fun:'组件名/fun'})
# vx缓存数据
因为刷新页面,修改后的需要重新请求,所以我们可以往本地存储中存放数据,页面刷新后给vx重新赋值方法如下↓ (opens new window)