一、父组件、子组件通信
1、父子组件通信: 父组件通过 props 向下传递数据给子组件
父-->子(方法):可以通过ref直接获取子组件实例XX,方法调用XX.xx
备注:
1) 单向数据流,所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。
这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。
这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。
这里有两种常见的试图改变一个 prop 的情形:
<1> prop 用来传递一个初始值,子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下,最好定义一个本地的 data 属性并将这个 prop 用作其初始值:
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
<2>prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个计算属性:
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
2) JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态。
props: 传值,父组件数值不变化,不会传值给子组建
3) watch: 子组件监听
watch 在值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,可以用immediate属性
watch 监听对象,可以用deep属性
参考:vue computed计算属性 watch监听
监听属性watch(handler方法immediate属性deep属性)
2、非父子组件通信
1) 子组件调用$emit方法向父级组件触发一个事件:?this.$emit('user-defined',"参数")
2) 在父组件引用该子组件内监听这个事件:v-on: user-defined
3) 父组件执行 user-defined 事件(父组件事件改变父组件的值)
二、非父子组件通信
使用一个空的 Vue 实例作为中央事件总线
import Vue from 'vue';
let bus = new Vue();
export default bus;
三、vuex 集中式状态管理模式
1、Vuex 的定义:
// Vuex 的定义:
import Vue from 'vue'
import Vuex from 'vuex'
const store = new Vuex.Store({
state: { // 自定义数据结构
count: 0
},
getters: { // 通俗理解getter里的函数就是vuex里的计算属性,类似于computed函数
countAdd (state) {
return state.count++;
}
},
mutations: { // 修改Store 内数据状态的方法,必须是同步事务
increment (state,n) { // n: 入参
state.count++
}
},
actions: { // 类 mutations,可以包含异步事务
incrementAsync ({ commit,state },n) { // commit 类 Store
setTimeout(() => {
commit('increment')
})
}
}
2、Vuex 在组件内的使用:
// vuex 的修改
mutations:
单个:this.$store.commit('increment',n)
多个:...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
'incrementBy' // 将 `this.incrementBy(amount)` 映射为`this.$store.commit('incrementBy', amount)`
])
actions:
单个:this.$store.dispatch('increment',n)
多个:...mapActions([
'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
'incrementBy' // 将 `this.incrementBy(amount)` 映射为`this.$store.dispatch('incrementBy', amount)`
])
// vuex 的获取
单个:computed: {
count () {
return this.$store.state.count
},
countAdd () {
}
}
多个:mapState 辅助函数
computed: {
// 使用对象展开运算符将此对象混入到外部对象中
...mapState([
'count','countAdd'...
])
// vuex 模块(module): 当应用变得非常复杂时,store 对象就有可能变得相当臃肿
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
备注:
1)vuex与localStorage
vuex 是 vue 的状态管理器,存储的数据是响应式的。但是并不会保存起来,刷新之后就回到了初始状态,
具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面,刷新之后,如果localStorage里有保存的数据,取出来再替换store里的state。