vue - 组件通讯

程序员 2024-9-28 00:37:59 115 0 来自 中国
1. props/$emit


  • 实用范围: 得当父子组件之间, 组件层级嵌套太深, 利用该方法较为繁琐,不发起利用;
  • 代码示例:

    1.png
  • 总结:

  • props中吸收到的值可以直接展示,但不发起直接对齐修改;
  • 如果父组件向子组件通报的值是通过接口获取的, 大概会存在耽误的情况;
2. provide/inject


  • 实用范围:  实用于多条理组件嵌套,通过provide/inject的方式,可以较少值在组件之间的层层通报
  • 代码示例:


  • 注:
    a. provide: 可以是一个对象,大概是一个返回对象的函数,内里包罗要通报的属性和属性值;
    b. inject: 是一个字符数组大概是一个对象; 属性值可以是一个对象,包罗from和default默认值;
  • 总结:
    优点: 可以在恣意层级对根组件的数据举行访问;
    缺点: 没有清楚的数据流向,倒霉于后期维护;
3.
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-11-23 17:38, Processed in 0.174802 second(s), 35 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表