脚本宝典收集整理的这篇文章主要介绍了vue非父子组件间传参问题，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

最近在使用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更加直观
综合各种方法的优缺点，推荐使用第二种，项目过于复杂请使用第三种
如果有更好的方法，请留言指教，谢谢

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的vue非父子组件间传参问题全部内容，希望文章能够帮你解决vue非父子组件间传参问题所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。