vue的组件几种通信方法

1.父传子

在子组件的标签上定义属性,子组件通过props来进行接收,可以通过数组或对象的方式接收,如果父组件没有传递属性,子组件可以用defalut来设置默认值父传子的使用场景 封装列表的时候 把数据传到子组件上渲染

2.子传父

子组件通过this.$emit(自定义事件的名字,要传给父组件的数据) 父组件通过子组件的标签监听自定义的时间,最后在父组件接收使用就可以了。
子传父的应用场景:在子组件中有删除等方法的时候要在子组件把下标传到父组件操作数据

3.兄弟组件通信

通过中央事件总线,我们也称之为eventBus。
在main.js定义一个空的vue实例并且挂载到原型上,通过 e m i t 传数据,在要接收的子组件的 c r e a t e d 钩子函数下通过 emit传数据,在要接收的子组件的created钩子函数下通过 emit传数据,在要接收的子组件的created钩子函数下通过on接收

4.vuex

把公共数据存在vuex里这样就能实现组件通信

5.本地存储

把要传递的数据存在本地存储里,再要接收的组件接收,也能实现组件通信

6.v-model

v-model是一个语法糖,是:value和@input的合写 所以说能实现组件通信

7. $attr 和 $listener

主要是祖孙之间传值 父组件下面有子组件a 子组件a下面又有 子组件b 在父组件里还是用自定义属性和自定义事件传 在子组件a下面绑定v-bind=" $attrs" v-on=" $ listeners" 在子组件b下面通过$attrs 拿数据 通过 $emit 调用方法

8.provide 和 inject

不管嵌套了几层都能拿到数据 把数据定义在 provide 里 在子组件通过 inject 拿到数据 缺点是不响应

9.children 和 parent

在子组件里通过$ parent 拿到父组件的数据和方法 在父组件里通过$children 拿到子组件的数据和方法

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值