xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

Vue 组件之间通信 All in One

组件间通信

1. 父子组件之间通信

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

1. props & $emit

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

2. $parent & $children

vm.parent & vm.children

3. ref

4. 自定义事件 & v-model

5. .sync

2. 兄弟组件之间通信

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

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

1. provide & inject

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

2. $attrs & $listeners

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

3. $boradcast & $dispatch

6. $root

5. 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

---

---

©xgqfrms 2012-2020

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

---