Vue组件间的通信

6 篇文章 0 订阅
本文介绍了Vue中不同组件间的通信方法,包括父组件向子组件传递自定义属性(Props)、子组件向父组件发送事件、使用Vuex进行兄弟组件通信、通过eventbus实现跨组件消息传递以及依赖注入和组件实例访问方法如$parent、$children和$root。
摘要由CSDN通过智能技术生成

 1.父给子传参(父:自定义属性传递变量,子:用Props['父元素自定义属性']接受),ref/refs父子传参 

 2.子给父传参(子:this.$emit(父元素自定义事件,传递的值) 父:自定义事件用参数去接收传递来 的值)

 3.兄弟间传参(用Vuex 代替)        

 通过给eventbus注册事件,别的组件触发事件,实现通信。

  ①创建一个eventbus对象,即创造一个vue对象,用作传递信息。

  ②接收信息的一方将事件通过vm.$on(“事件名”,事件处理函数)添加在eventbus对象上。

  ③发送数据的一方,通过vm.$emit(“事件名”,传递的数据)触发事件,将数据传递。

 4.依赖注入provide/inject

  Vue提供的两个钩子,适用于父子/祖孙之间的通信,层次很深的情况下可以用这种方法,provide发送数据,inject接收数据。

5.$parent(是个对象)/$children(是个数组)

  前者可以访问父组件的实例,后者可以访问子组件的实例

6.$root

  访问根组件的实例

7.$attrs/$listeners

  祖孙隔代通信

  • 8
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值