闲鱼项目结束完后,发现自己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传值
父组件的代码
子组件的代码