组件内通信主要分为两种:父子组件通信和子组件之间通信。
1.父子组件通信
- 父组件通过
props
属性向子组件传递数据,这点和React一样。 - 子组件通过事件
emit
给父组件发送消息。
看一个例子:
// 组件A中使用子组件confirmDialog
<template>
...
<vc-confirmDialog :msgTitle="msgObj.title" :msgBody="msgObj.msg"
v-on:cancel="closeDialog" v-on:ok="deleteItem">
</vc-confirmDialog>
</template>
<script type="es6">
import confirmDialog from '../widget/confirmDialog.vue';
export default{
...
components: {
'vc-confirmDialog': confirmDialog //定义组件标签
},
}
</script>
//子组件confirmDialog
<script type="es6">
export default{
...
// 接收父组件的属性值
props: {
msgTitle: {
type: String,
default: ''
},
msgBody: {
type: String,
default: ''
}
}
},
methods: {
cancel: function () {
// 触发父组件属性函数
this.$emit('cancel');
},
ok: function () {
// 触发父组件属性函数
this.$emit('ok');
}
}
}
</script>
父组件通过属性绑定方式<vc-confirmDialog :msgTitle="msgObj.title" :msgBody="msgObj.msg" @cancel="closeDialog" @ok="deleteItem"></vc-confirmDialog>
传递了两类属性参数给子组件:
- 数据属性:
msgTitle
和msgBody
是传递给子组件的数据,子组件通过props
接收。 - 事件属性:父组件通过
@eventName="eventFuc"
来定义接收函数,一旦子组件触发需要父组件同步更新的事件$emit("eventName")
,父组件即会调用eventFunc
,然后更新数据。
父组件可以利用ref
属性直接访问组件实例/DOM对象。这一点,和React一样。
<vc-confirmDialog :msgTitle="msgObj.title" :msgBody="msgObj.msg"
@cancel="closeDialog" @ok="deleteItem" ref="dialog"></vc-confirmDialog>
...
//父组件直接调用子组件方法
this.$refs.dialog.ok();
相比Vue,React父子组件通信无需事件机制,只需要属性传递即可(参考文章:React入门系列(六)组件间通信)。
2.组件间通信
我们可以定义一个空的Vue实例作为event bus,通过事件广播emit
和事件监听on
来传递数据。
// 数据总线bus.js
import Vue from 'vue';
export default new Vue();
// 组件A中触发事件
bus.$emit('toggleLogin', false);
// 组件B中接收事件
bus.$on('toggleLoading', (show)=>{
this.isShowLoading = show;
});
如果是大量组件交叉性复杂通信,建议用插件Vuex处理。
3.Vuex
Vuex的核心是一个全局store,其为一个容器,包含着应用中大部分的状态(state)。
Vuex 和单纯的全局对象有以下两点不同:
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。
(1) state
Vuex 使用 单一状态树 —— 用一个对象就包含了全部的应用层级状态。
这也意味着,每个应用将仅仅包含一个 store 实例(可以利用modules把store细分)。
vue组件内调用:
this.$store.state.count
也可以通过辅助函数mapState
获取多个状态值。
export default {
computed: mapState({
count: state => state.count,
countAliasName: 'count',
totalCount (state) {
return state.count + this.localCount
}
})
}
如果计算属性名与state
节点属性名称一直,那么,可以通过数组方式更加便捷的获取state
节点。
如果mapState
的值和其他计算属性混合使用,那么,利用ES的对象展开运算符吧。
computed: {
// 获取 store.state.count
...mapState(["count"]),
others
}
(2) Getter
Getter
可以认为是store
上的计算属性,它的返回值会根据依赖被缓存起来,只有当依赖值发生了变化,才会被重新计算。
state: {
todos: [
{ id: 1, text: 'abc', checked: true },
]
},
getters: {
checkedTodos: state => {
return state.todos.filter(todo => todo.checked)
}
}
组件中使用getter
如下:
computed: {
checkedTodosCount () {
return this.$store.getters.checkedTodos.length
}
}
如果组件需要批量使用多个getter
函数,那么,可以通过辅助函数mapGetters
将getter
混入到computed
对象中。
export default {
computed: {
...mapGetters(['checkedTodosCount'])
}
}
(3) moutation
mutation 非常类似事件:每个 mutation 都有一个字符串的事件类型 (type) 和 一个 回调函数 (handler)。
- mutation 必须是同步函数
- 提交mutation需要用
commit
函数
mutations: {
//payload就是额外的参数
increment (state, payload) {
state.count += payload.amount;
}
}
组件内触发事件:
// 以载荷形式分发
this.$store.commit('increment',{count: 10}); 或者
// 以对象形式分发
this.$store.commit({
type: 'increment',
count: 10
})
也可以使用辅助函数mapMutations
将多个store.commit
映射到method
对象上。
export default {
methods: {
...mapMutations([
'increment', // 等价于`this.$store.commit('increment')`
]),
}
}
(4) actions
与mutations不同之处:
- Action 提交的是 mutation。
- Action 可以包含异步操作。
- 提交Action需要用
dispatch
函数
actions: {
increment ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
组件内触发事件:
this.$store.dispatch('increment');
同样的,可以利用辅助函数mapActions
将组件的methods 映射为 store.dispatch
调用。
export default {
methods: {
...mapActions([
'increment', // 等价于`this.$store.dispatch('increment')`
}
}
(5) modules
使用单一状态树,导致应用的所有状态集中到一个很大的对象。但是,当应用变得很大时,store 对象会变得臃肿不堪。
为了解决以上问题,Vuex 允许将 store 分割到模块(module)。每个模块拥有自己的 state,mutation,action。
// modules/index.js如下
import knowledge from './knowledge'
import common from './common'
import demo from './demo'
import help from './help'
export default {
knowledge,
common,
demo,
help
}
// index.js 如下
import modules from "./modules";
export default new Vuex.Store({
modules,
});
// 组件内使用如下
store.state.help
store.state.demo