最近在使用vue进行开发，遇到了组件之间传参的问题，此处主要是针对非父子组件之间的传参问题进行总结，方法如下：
一、如果两个组件用友共同的父组件，即
FatherComponent.vue代码
<template>
<child-component1/>
<child-component2/>
</template>
此时需要组件1给组件2传递某些参数，实现如下：
1、父组件给组件1绑定一个方法，让组件1进行回调,组件2接收某个属性，通过改变父组件的数据从而实现组件2的属性值的更新，即
父组件
<child-component1 :callback="child1Callback" />
<child-component2 :props="child2Props" />
data () {
return {
child2Props: '';
}
}
child1Callback ([args...]) {
// 此处更新了父组件的data，使组件2的属性prop改变
this.child2Props = [args...]
}
组件1
props: ['callback']
change () {
this.callback([args...])
}
2、通过bus进行实现，首先bus.js如下
const bus = new Vue()
export default bus
组件1
import bus from './bus'
methods: {
change () {
bus.$emit('callComponent2', [args...])
}
}
组件2
import bus from './bus'
mounted () {
bus.$on('callComponent2', function ([args...]) {
// 做你想做的
})
}
3、利用vuex实现，创建store.js相当于某些全局变量，但是可以被vue检测到变化
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
pageNo: 0
},
mutations: {
'change' (state, [args...]) {
state.pageNo++
}
}
})
export default store
项目入口js
import store from './store.js'
new Vue({
...
store: store
...
})
此时在任意vue文件都可以改变pageNo的值，并且会影响到所有使用了pageNo的组件，都会进行更新
childComponent1.vue
this.$store.commit('change')
childComponent2.vue
{{this.$store.state.pageNo}}
总结：
1、第一种比较绕，需要有共同的父组件，如果组件间层级太多，会导致代码混乱，比较难维护。
2、第二种比较直观，推荐使用，但是要理解，请仔细阅读官方文档
3、利用vuex在很多项目中都会显得杀鸡用牛刀，虽然更好理解，但是也带来了学习成本，并且可能会有一些副作用，但是如果项目比较复杂，利用vuex更加直观
综合各种方法的优缺点，推荐使用第二种，项目过于复杂请使用第三种
如果有更好的方法，请留言指教，谢谢