Vue 组件之间通信 All in One

时间:2021-02-25 20:44:16

Vue 组件之间通信 All in One

组件间通信

Vue 组件之间通信 All in One

1. 父子组件之间通信

https://stackblitz.com/edit/vue-parent-child-commutation?file=readme.md

  1. props & $emit

父组件通过 props 将数据下发给子组件,子组件通过 $emit 来触发自定义事件来通知父组件进行相应的操作


  1. $parent & $children

vm.parent & vm.children


  1. ref

  1. 自定义事件 & v-model

  1. .sync

2. 兄弟组件之间通信

https://stackblitz.com/edit/vue-prant-child-commutation?file=readme.md


3. 跨多层级的组件之间通信

  1. provide & inject

https://vuejs.org/v2/api/#provide-inject


  1. $attrs & $listeners

https://vuejs.org/v2/guide/render-function.html#Passing-Attributes-and-Events-to-Child-Elements-Components


  1. $boradcast & $dispatch

  1. $root

  1. EventBus / EventEmitter

https://cn.vuejs.org/v2/guide/migration-vuex.html#Store-的事件触发器移除

https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换

$dispatch 和 $broadcast 已经被弃用。请使用更多简明清晰的组件间通信和更好的状态管理方案,如:Vuex。

自定义 EventEmitter


vuex

global object

localStroage

sessionStroage

IndexedDB

demos

https://stackblitz.com/


refs

https://segmentfault.com/a/1190000022083517

https://juejin.im/post/6844903887162310669

https://zhuanlan.zhihu.com/p/109700915

https://juejin.im/post/6844903784963899405


Vue 组件之间通信 All in One

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!