vue如何传值。简解

187 阅读1分钟

vue组件如何进行传值

1.父组件向子组件传递数据

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

父传子原理.jpg

2.子组件向父组件传递数据

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

子传父原理.jpg

3.非父子组件之间传递数据

1.引入第三方new Vue定义为eventBus
2.在组件中created中订阅方法eventBus.on(“自定义事件名”,methods中的方法名)3.在另一个兄弟组件中的methods中写函数,在函数中发布eventBus订阅的方法eventBus.on(“自定义事件名”,methods中的方法名) 3.在另一个兄弟组件中的methods中写函数,在函数中发布eventBus订阅的方法eventBus.emit("自定义事件名")
4.在组件的template中绑定事件(比如click)