Vue入门系列(五)组件通信

组件内通信主要分为两种:父子组件通信和子组件之间通信。

1.父子组件通信

  • 父组件通过props属性向子组件传递数据,这点和React一样。
  • 子组件通过事件emit给父组件发送消息。
props-events.png

看一个例子:

// 组件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>传递了两类属性参数给子组件:

  1. 数据属性:msgTitlemsgBody是传递给子组件的数据,子组件通过props接收。
  2. 事件属性:父组件通过@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。

vuex.png
(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函数,那么,可以通过辅助函数mapGettersgetter混入到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.png
// 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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容