vue兄弟之间的传值问题

Question

我有个侧边列表,上面有两个按钮,每个按钮都有一个组件页面,我现在就是想点击第一个按钮的时候,弹出一个组件,是一个上传文件功能的页面.
我想当我点击上传文件的时候
第二个按钮对应的组件自动弹出,并且显示上传文件的文件名.
用什么方法可以实现?
我用了兄弟之间传值,好像不可以.

父组件是toolbar,我现在就是想把upload页面里面的input file上传的文件的名称发给fileselector去显示

Answer 1

你这不是兄弟组件传值吧，流程大概是 子组件-->父组件-->兄弟组件-->子组件

嫌麻烦的话也可以使用vuex

Answer 2

使用vuex来管理大型项目中的数据共享与传递问题，链接：https://vuex.vuejs.org/zh-cn/

Answer 3

建议直接上手vuex，管他什么大项目小项目。用了它就没这些烦恼了。

Answer 4

用bus，通过事件传递
链接描述
看这篇文章，简洁

1、（建议）建立一个单独的文件bus.js

import Vue form 'vue'
export default new Vue()

2、import bus from '你的路径/bus.js'

bus.$emit('eventName', param) //（传递事件）
// 在mounted中：
bus.$on('eventName', () => {'your code'}) //(接收事件)

Answer 5

先说兄弟组件数据通信：
1、使用命令行工具（CLI）构建的Vue项目建议使用Vuex，官方也有教程，项目结构也可以参考这里
2、如果是用<script>直接引入的Vue，可以使用一个空的Vue作为事件总线

再说解决方案：
上面两种说的是兄弟组件间直接通信的解决方案，其实也可以通过子组件->父组件->子组件的方法解决这个问题。
FileSelector组件动态绑定父组件的属性值（如FileName和Active），用于表示该组件的文件名及显示与否；Upload组件通过$emit()方法传递获取到的文件名给父组件；父组件Toolbar通过监听Upload的自定义事件改变FileName和Active的值，从而使得FileSelector激活并接收文件名。

Answer 6

三种方案：
1.用this.$parent.$child找到想要的组件，缺点就是维护性差，子组件顺序一变就会出现很大问题。
2.用vuex，确定就是增加的冗余代码多，适合大项目，小项目用有点多余。
3.往window上挂属性，缺点是自己得加监听，而且就是污染了window的变量。