Vue入门系列（五）组件通信

2021-01-14 10:38:33 浏览数 (1)

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

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

props-events.png

看一个例子：

代码语言：javascript复制
// 组件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. 数据属性：msgTitle和msgBody是传递给子组件的数据，子组件通过props接收。
  2. 事件属性：父组件通过@eventName="eventFuc"来定义接收函数，一旦子组件触发需要父组件同步更新的事件$emit("eventName")，父组件即会调用eventFunc，然后更新数据。

父组件可以利用ref属性直接访问组件实例/DOM对象。这一点，和React一样。

代码语言：javascript复制
<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来传递数据。

代码语言：javascript复制
// 数据总线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组件内调用：

代码语言：javascript复制
this.$store.state.count

也可以通过辅助函数mapState获取多个状态值。

代码语言：javascript复制
export default {
  computed: mapState({
    count: state => state.count,
    countAliasName: 'count',
    totalCount (state) {
      return state.count   this.localCount
    }
  })
}

如果计算属性名与state节点属性名称一直，那么，可以通过数组方式更加便捷的获取state节点。 如果mapState的值和其他计算属性混合使用，那么，利用ES的对象展开运算符吧。

代码语言：javascript复制
computed: {
  //  获取 store.state.count
  ...mapState(["count"]),
  others
}
(2) Getter

Getter可以认为是store上的计算属性，它的返回值会根据依赖被缓存起来，只有当依赖值发生了变化，才会被重新计算。

代码语言：javascript复制
state: {
    todos: [
      { id: 1, text: 'abc', checked: true },
    ]
  },
getters: {
    checkedTodos: state => {
      return state.todos.filter(todo => todo.checked)
    }
  }

组件中使用getter如下：

代码语言：javascript复制
computed: {
  checkedTodosCount () {
    return this.$store.getters.checkedTodos.length
  }
}

如果组件需要批量使用多个getter函数，那么，可以通过辅助函数mapGetters将getter混入到computed对象中。

代码语言：javascript复制
export default {
  computed: {
    ...mapGetters(['checkedTodosCount'])
  }
}
(3) moutation

mutation 非常类似事件：每个 mutation 都有一个字符串的事件类型 (type) 和 一个 回调函数 (handler)。

  • mutation 必须是同步函数
  • 提交mutation需要用commit函数
代码语言：javascript复制
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对象上。

代码语言：javascript复制
export default {
  methods: {
    ...mapMutations([
      'increment', // 等价于`this.$store.commit('increment')`
    ]),
  }
}
(4) actions

与mutations不同之处：

  • Action 提交的是 mutation。
  • Action 可以包含异步操作。
  • 提交Action需要用dispatch函数
代码语言：javascript复制
actions: {
  increment ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}
组件内触发事件：
this.$store.dispatch('increment');

同样的，可以利用辅助函数mapActions将组件的methods 映射为 store.dispatch 调用。

代码语言：javascript复制
export default {
  methods: {
    ...mapActions([
      'increment', // 等价于`this.$store.dispatch('increment')`
  }
}
(5) modules

使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。

为了解决以上问题，Vuex 允许将 store 分割到模块（module）。每个模块拥有自己的 state，mutation，action。

modules.png

代码语言：javascript复制
// 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
vue.js react 编程算法 jqueryui 网站

0 人点赞