一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情
在项目开发过程中，最常用到的便是：vue组件间的传值。以下是本人总结的vue组件间传值的几种传值方式。首先可以大致区分为父子组件之间的传值，跨组件之间的传值和兄弟组件组件的传值。该文章讲解第三部分:兄弟组件之间的传值，但这也同时可应用于跨组件之间的传值。
bus总线
关于兄弟组件传值，如果项目不是很多，且需要共享的数据不是很多的话，可以考虑使用bus总线的方法。这其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。
可以在utils文件夹中创建一个bus.js，并在main.js中使用import vueBus from '@/utils/bus' Vue.use(vueBus )全局引入，然后把bus挂载Vue实例的原型对象上Vue.prototype.$bus = vueBus;之后就可以用$bus进行监听和触发。也可在需要使用的文件中按需引入。接下来使用局部引入的方式做总结。
bus.js
import Vue from 'vue';
// 使用 Event Bus
const bus = new Vue();
export default bus;
在需要传递数据的组件中，使用$emit发布事件
import bus from './../utils/bus'
export default {
methods:{
sendData(){
bus.$emit('name', 'vivi');
}
}
}
在需要接收数据的组件中，可在mounted中使用$on接收数据
import bus from './../utils/bus'
export default {
mounted(){
bus.$on('name',data=>{
console.log(data); //可接收到name为'vivi'
})
}
}
同时要记得在生命周期中销毁或销毁之前清除自定义事件。因为正如上文所说，这是一个订阅发布模式，采用bus作为一个事件广播，因此这种方式并不会自动销毁，所以为了避免回调函数重复执行，就需要做清除操作。
this.$bus.$off('name')
2.vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以帮助我们管理共享状态，如果项目较大，涉及的共享数据较多，可以考虑使用vuex。这部分内容较多，以后再做详细总结，本次仅总结一个最简单的情况。
Vuex由以下几个部分构成：
- state :是存储的单一状态，是存储的基本数据。
- Getters:是store的计算属性，和computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。
- Mutations:提交更改数据，使用store.commit方法更改state存储的状态。（同步函数）
- Actions:像一个装饰器，处理异步操作，提交mutation，而不是直接变更状态。
- Module:是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。
建立一个最简单的store.js
//store.js
const store = new Vuex.Store({
state: {
num: 0
},
//通过mutations来修改state中的值
mutations: {
add(state) {
state.count++
}
},
//通过action触发mutations中add方法
actions: {
add({commit}) {
commit("add");
}
},
//通过getter中的方法来获取state中的值
getters: {
getNum(state) {
return state.num
}
}
})
export default store
使用实例
<template>
<div>
<p>{{this.$store.getters.getNum}}</p>
<button @click="add">我想要增加num的值</button>
</div>
</template>
<script>
export default {
methods: {
add(){
this.$store.dispatch("add");//触发add方法增加num的值
}
}
}
</script>
