vue组件通信方式总结

vue 组件通讯

父子组件通讯

父组件：
<scroll class="wrapper" :pullup="pullup" @pullup="more" ></scroll>

子组件：
  props:{
    pullup:{type: Boolean,
              default: true
      }
  }


this.$emit('pullup'，“12”)
//子组件给父组件传值，通过自定义函数，父组件的中绑定的@pullup="more"直接触发more(value)方法,

兄弟组件通讯

兄弟组件通讯在不适用 vuex 的情况下可以使用 busEvent 的方式进行 首先创建 bus.js 内容如下：

 //兄弟组件通讯总线
import Vue from 'vue'
export default new Vue;

然后在需要通讯的组件中引入 bus.js

import Bus from '@/components/base/bus'

例子：组件 A--->组件 B 组件 a 中：

Bus.$emit('msg', '兄弟数据')

这里就是创建了一个 msg 的自定义事件 组件 B： 组件 B 去监听这个 msg 的自定义事件

Bus.$on('msg', msg => console.info(msg)  //兄弟数据)

使用 vuex 进行数据管理

首先我们看下 vuex 的文件结构以及他们是干什么的

actions.js                   //Action 类似于 mutation
getters.js                  //相当于vue中的computed计算属性
index.js                    //统一管理vuex中的 action mutation getter state 对外 export
mutation-types.js           //定义了所有一些常量，对整个 app 包含的 mutation有一个统一的规划
mutations.js                //定义了所有的mutation方法的实现
state.js     //vuex中的数据源，所有的数据都必须在state里

使用 vuex 的原因应该都是想对数据进行统一的管理，减少各种状态和数据在组件之间传递的繁琐。

1：state

const state = {
  keyword : ""
}
export default state

这里我们定义了一个 keyword 关键字，并把它的初始值设置为空

在 vue 组件中我们可以这样去取出这个值

 this.$store.state.keyword

2：getter 其实就是 vuex 中的计算属性可以对 state 的值进行相应的处理然后再取出。

3：mutation-types

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然

export const SET_KEYWORD = 'SET_KEYWORD';//搜索关键字

4：mutation 定义了修改 state 中的值得方法

//这里只是接受传过来的keyword,将他赋值给state。
import {SET_KEYWORD} from './mutation-types';
const mutations = {
  [SET_KEYWORD](state, keyword) {
    state.keyword = keyword;
  }
};
export default mutations;

在 vue 组件中我们可以这样去提交这个值

 this.$store.commit("SET_KEYWORD", msg);

或者

this.\$store.commit({
  type: 'SET_KEYWORD',
  keyword: msg
})

5：index 部分代码

import Vue from 'vue';
import Vuex from 'vuex';
import getters from './getters';
import mutations from './mutations';
import actions from './action';
import state from './state';

Vue.use(Vuex);
export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
})

最后：讲的比较通俗，如需更系统全面的文档，可查看(vuex 文档) https://vuex.vuejs.org/zh-cn/