Vue2的组件间的通信方法

1、父子组件之间的传值
父组件向子组件传值

1、父组件引用子组件,并且通过v-bind:的形式,把需要传递给子组件的信息传递给子组件

在子组件中通过props去接收父组件传递过来的数据

2、父组件向子组件传递一个方法
父组件向子组件传递方法的时候,在父组件中定义一个方法,然后在子组件中用@方法名="父组件方法"的形式接收

在子组件中定义一个方法,或者是在mounted中,通过
this.$emit(‘方法名’,参数)的方式去接收

子组件向父组件传值

1、在父组件向子组件传递方法的时候可以传递参数

2、兄弟组件的EventBus传值

写一个公共的Bus事务
注册事件:this.bus. o n ( ) 触 发 事 件 : t h i s . b u s . on() 触发事件:this.bus. on()this.bus.emit()

3、vuex

状态管理工具

4. parent /parent/root / $children

子组件A和子组件B都是父组件W的子组件,
子组件A:this. p a r t e n t . partent. partent.on(‘confirm’,handleConfirm)
子组件B:this. p a r t e n t . partent. partent.emit(‘confirm’,list)

获取子组件的数据
this.$children[0].msg

获取根组件的方法
this.$root.handleRoot()

5、$ref (引用的方式获取子节点)

常用于父组件调用子组件的方法
在父组件中引入子组件,并在子组件中写ref=“XXX”,然后调用子组件的方法:
this.$refs.hello.handleRef()

6、attrs/listeners(常用于对原生组件的封装)

$attrs可以获取父组件传递进来但是没有通过props接收的属性

$listener会展开父组件的所有监听的事件(click事件等)
常用于更加高级的封装

7、provide / inject

常用一些多个组件嵌套封装,一个顶层组件内部的后代组件需要用到顶层组件的数据就使用这种方式

类似于React中的context

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值