您的位置:首页 > 汽车 > 新车 > 【Vue】 组件通信方式

【Vue】 组件通信方式

2024/10/14 4:33:37 来源:https://blog.csdn.net/DX390609/article/details/140545080  浏览:    关键词:【Vue】 组件通信方式

VUE中实现通信的⽅式:

  1. props:- 若 父传子:属性值是非函数。- 若 子传父:属性值是函数
  2. emit
  3. v-model
  4. refs- $refs:父→子。$parent:子→父。
  5. provide/inject:祖孙组件直接通信,在祖先组件中通过provide配置向后代组件提供数据,在后代组件中通过inject配置来声明接收数据
  6. eventBus
  7. vuex/pinia(状态管理⼯具)
  8. mitt
    常⻅的是上⾯的这⼏种,少⻅的其实还可以算上插槽 slot, 混⼊,路由携带参数,localStorage, $parent /$children

1.props
常常使⽤在⽗组件传递給⼦组件通信的过程中,⾸先在⼦组件中使⽤ props,来接收对应的属性,⽽在⽗组件中使⽤⼦组件的地⽅,添加上⾯定义的属性。
2. emit
这个就和上⾯的相反,是使⽤在⼦组件给⽗组件传递值的中。⼦组件中声明对应的事件,当⼦组件触发事件,就会通过this.$emit(‘事件’ , ‘数据’)传递到,⽽在⽗组件中使⽤⼦组件的地⽅,添加上⾯定义的事件,这个可以获取⼦组件传来的值。
3. provide/inject
这对组合往往使⽤在层级⽐较深的时候,⽐如A组件下可能还有 B组件 ,B组件下有C组件…E组件.⽽使⽤这对API,就能⽆论层级有多深都能获取到
4. eventBus
也就是事件总线,简单粗暴,可以到处⻜。可以不管你是不是⽗⼦关系,通过新建⼀个Vue事件bus对象,然后通过 bus.emit 触发事件,bus.on 监听触发的事件。但不建议乱⽤,不好维护。
5. vuex
对于⼤型的项⽬来说往往是很必要的,尤其单⻚⾯应⽤,很多⻚⾯嵌套⻚⾯,关系很多。⽽使⽤ VUEX 就能便捷的统⼀管理。
总结
常⻅的组件通信⽅式有通过 props / emit / provide 和 inject / eventBus / vuex 等,⼀般根据不同的场景来决定使⽤的⽅式。⽐如⽗⼦组件通信使⽤ props ,反过来使⽤ emit 。⽽当层级很多的时候使⽤ provide ,全局的状态管理使⽤ vuex等。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com