VUE中传值的问题

        闲鱼项目结束完后,发现自己vue传值有点不太清楚,故此做些整理来加深自己的理解。

一、父传子

        方法:父组件内设置要传的数据,在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上,在子组件添加参数props接收即可。

图中,父组件中有一个ids的数据,要传给子组件,就在父组件里面给子组件绑定一个属性,值为ids,然后我们在子组件里面用props接到。script和dom中就可以直接用了。

二、子传父

        方法:子组件通过vue实例方法$emit进行触发并且可以携带参数,父组件监听使用@(v-on)进行监听,然后进行方法处理。

三、兄弟组件传值

如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递。空的vue对象就相当于一个全局对象。

        1、创建一个空的vue对象

views/vuebus.js

export default new Vue();

        2.在兄弟2组件中接收数据

兄弟1中触发传值事件

四、vueX传值

父组件的代码

子组件的代码

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值