温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue中实现多重组件传值

发布时间:2021-06-03 16:59:10 来源:亿速云 阅读:345 作者:Leah 栏目:web开发

本篇文章为大家展示了Vue中实现多重组件传值,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

vue中组件传值方式整理

1.我们最熟悉的父子组件传值

父->子 props
 子->父 $emit

这些我们最常用的就不说了,如果有不理解的,俺这儿有篇不错的文章,链接奉上~

https://www.cnblogs.com/LoveAndPeace/p/7273648.html

2.兄弟组件或无关系组件之间的传值

我们最常用的方式采用一个第三方变量 俗称eventbus
  通过其中一个$emit发另一个$on接收的方式 实现组件传值
  
  main.js中挂载一下

Vue中实现多重组件传值

在其中一个页面$emit

Vue中实现多重组件传值

另一个页面$on

Vue中实现多重组件传值

是不是有点像昨天我写的pubsub呢?哈哈哈哈哈

3.attr和listener进行传值(注意,这两种只能向下传递)

父组件里的子组件上写上你要传递的键名键值,

Vue中实现多重组件传值

子组件里通过{{$attrs}}拿到你所有传递的值

Vue中实现多重组件传值

这样直接就拿到了,是不是很神奇~

效果:

Vue中实现多重组件传值

子组件里通过{{$attrs}}拿到你所有传递的值

子组件下边还有组件 可以用v-bind:"$attrs"传递,在孙子组件中通过{{$attrs}}

Vue中实现多重组件传值

listener用来传递事件,用法大致一个样

Vue中实现多重组件传值

我们设置一个点击事件

在子元素中↓我们console下,看看拿到没有

Vue中实现多重组件传值

Vue中实现多重组件传值

再笼统的概述下
  vue中 listeners事件传递
父组件里的子组件上写个函数 比如@log="log",在当前页的methods:{}里对应上执行的语句
子组件触发的话里写个触发事件,如click="aaa" 
methods写法:
methods:{
 aaa(){
  this.$listeners.你父组件的那个方法 这里是this.$listeners.log()调用
 }
}

子组件下还有组件的话 用v-on:"$listeners"再往下传
下面继续用子组件获取的方法获取

4.采用ref的方式 有点react父传子的亚子

but!也不太一样 ,在你父组件引入的子组件上写个ref="xxx",你父组件便拿到了一系列子组件的东西,比如数据,事件等↓

Vue中实现多重组件传值

Vue中实现多重组件传值

5.用vuex 就不用说了吧 数据集中起来,每个页面值都能相互拿到

state里设置值

通过stor.state.值拿到值

通过commit 或者dispatch往mutations和actions里提交可以做数据对应处理等等....

6.通过provide设置,inject取值但是这种方式不建议用

举个栗子:

Vue中实现多重组件传值

另一个组件

Vue中实现多重组件传值

上述内容就是Vue中实现多重组件传值,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI