13518219792
本篇文章为大家展示了Vue中实现多重组件传值，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
创新互联是一家从事企业网站建设、成都网站设计、做网站、行业门户网站建设、网页设计制作的专业网站制作公司，拥有经验丰富的网站建设工程师和网页设计人员，具备各种规模与类型网站建设的实力，在网站建设领域树立了自己独特的设计风格。自公司成立以来曾独立设计制作的站点上1000+。
vue中组件传值方式整理
1.我们最熟悉的父子组件传值
父->子 props 子->父 $emit
这些我们最常用的就不说了，如果有不理解的，俺这儿有篇不错的文章，链接奉上~
https://www.cnblogs.com/LoveAndPeace/p/7273648.html
2.兄弟组件或无关系组件之间的传值
我们最常用的方式采用一个第三方变量 俗称eventbus 通过其中一个$emit发另一个$on接收的方式 实现组件传值 main.js中挂载一下
在其中一个页面$emit
另一个页面$on
是不是有点像昨天我写的pubsub呢？哈哈哈哈哈
3.attr和listener进行传值(注意，这两种只能向下传递)
父组件里的子组件上写上你要传递的键名键值，
子组件里通过{{$attrs}}拿到你所有传递的值
这样直接就拿到了，是不是很神奇~
效果：
子组件里通过{{$attrs}}拿到你所有传递的值
子组件下边还有组件 可以用v-bind:"$attrs"传递，在孙子组件中通过{{$attrs}}拿
listener用来传递事件，用法大致一个样
我们设置一个点击事件
在子元素中↓我们console下，看看拿到没有
再笼统的概述下
vue中 listeners事件传递
父组件里的子组件上写个函数 比如@log="log"，在当前页的methods:{}里对应上执行的语句
子组件触发的话里写个触发事件，如click="aaa"
methods写法:
methods:{
aaa(){
this.$listeners.你父组件的那个方法 这里是this.$listeners.log()调用
}
}
子组件下还有组件的话 用v-on:"$listeners"再往下传
下面继续用子组件获取的方法获取4.采用ref的方式 有点react父传子的亚子
but！也不太一样 ，在你父组件引入的子组件上写个ref="xxx"，你父组件便拿到了一系列子组件的东西，比如数据，事件等↓
5.用vuex 就不用说了吧 数据集中起来，每个页面值都能相互拿到
state里设置值
通过stor.state.值拿到值
通过commit 或者dispatch往mutations和actions里提交可以做数据对应处理等等....
6.通过provide设置，inject取值但是这种方式不建议用
举个栗子：
另一个组件
上述内容就是Vue中实现多重组件传值，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
