vue组件通讯的方式

简介: 在 Vue 中,组件通讯有多种方式

45. vue组件通讯的方式

Vue 中,组件通讯有多种方式,包括以下几种:

  1. Props / Emit:父组件通过 props 向子组件传递数据,子组件通过 $emit 事件向父组件发送消息。

  2. 自定义事件:父组件可以在子组件上绑定自定义事件,子组件通过 $emit 方法触发该事件,父组件可以监听该事件并做出相应的处理。

  3. $refs`:父组件可以通过 `$refs 属性获取子组件的实例,并直接调用子组件实例的方法或访问子组件实例的属性。

  4. provide / inject:祖先组件通过 provide 向子孙组件注入数据,子孙组件通过 inject 选项来接收注入的数据。这种方式在跨层级组件通讯时比较有用。

  5. EventBus:使用一个独立的 Vue 实例作为事件总线,不同的组件通过该实例来通讯。

  6. Vuex:使用 Vuex 管理应用的状态,各个组件通过 Vuex 来获取和更新共享的状态。

需要根据实际的场景和需求选择合适的组件通讯方式,以达到简洁、高效和可维护的效果。

相关文章
|
1天前
|
存储 API
vue3中如何动态自定义创建组件并挂载
vue3中如何动态自定义创建组件并挂载
|
1天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
10 2
|
1天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
1天前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
9 1
|
1天前
|
JavaScript
vue学习(14)深度监视
vue学习(14)深度监视
10 0
|
JavaScript
Vue的非父子组件之间传值
全局事件总线 一种组件间通信的方式,适用于任意组件间通信
|
12月前
|
缓存 JavaScript 前端开发
Vue Props、Slot、v-once、非父子组件间的传值....
Vue Props、Slot、v-once、非父子组件间的传值....
72 0
|
JavaScript
Vue中父子组件传值
先在⽗组件中给⼦组件的⾃定义属性绑定⼀个⽗组件的变量
|
JavaScript
vue 组件传值
vue 组件传值
71 0
|
JavaScript
vue父子组件传值
vue父子组件传值