Vue 组件之间通讯的方法。

一, 父组件向子组件传递数据 


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


二, 子组件向父组件传递数据 


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


三, 非父子组件之间传递数据 


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

四,v-model

利用v-model进行双向数据绑定,实现组件之间的数据传递。

五,.sync

和v-model功能相似,也是实现数据的双向绑定的,但和v-model的区别在于.sync可以在同个组件上绑定多个。但在vue3中已经将.sync删除。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值