vue父子组件通信问题解决的思路之一
来源:互联网 发布:知途旅行网 编辑:程序博客网 时间:2024/06/12 12:55
组件之间的作用域独立,而组件之间经常又需要传递数据。
A 为父组件,下面有子组件 B 和 C。
A 的数据可以通过 props 传递给 B 和 C。
A 可以通过 $broadcast 调用 B 和 C 的 events,从而操作 B 和 C 的数据。
B 和 C 可以通过 $dispatch 调用 A 的 events,从而操作 A 的数据。
当 B 需要操作 C 的数据就会比较麻烦,需要先 $dispatch 到 A,再 $broadcast 到 C。涉及的组件通信就越多、越频繁,会导致难以管理和维护。
这就是 Vuex 的意义所在。它可以将数据置于单独的一层,并提供给外部操作内部数据的方法。
=== === ===
更新:
Vue 2 发布了,去掉了 $dispatch 和 $broadcast,已经不会出现通信事件 ping-pong 的情况了。我们需要有一个 Vue 实例来充当通信媒介的作用,Vue 官方文档里将它叫做 event bus。
当我们需要组件之间事件通信的时候,只需要对这个 event bus 使用 $emit 和 $on 就可以了。
Event bus 是一种实践,你也可以在 Vue 1.x 中使用它。
A 为父组件,下面有子组件 B 和 C。
A 的数据可以通过 props 传递给 B 和 C。
A 可以通过 $broadcast 调用 B 和 C 的 events,从而操作 B 和 C 的数据。
B 和 C 可以通过 $dispatch 调用 A 的 events,从而操作 A 的数据。
当 B 需要操作 C 的数据就会比较麻烦,需要先 $dispatch 到 A,再 $broadcast 到 C。涉及的组件通信就越多、越频繁,会导致难以管理和维护。
这就是 Vuex 的意义所在。它可以将数据置于单独的一层,并提供给外部操作内部数据的方法。
=== === ===
更新:
Vue 2 发布了,去掉了 $dispatch 和 $broadcast,已经不会出现通信事件 ping-pong 的情况了。我们需要有一个 Vue 实例来充当通信媒介的作用,Vue 官方文档里将它叫做 event bus。
export default new Vue();
当我们需要组件之间事件通信的时候,只需要对这个 event bus 使用 $emit 和 $on 就可以了。
import Bus from './bus.js';export default Vue.extend({ template: ` <div>{{msg}}</div> `, data: () => ({ msg: 'Hello World!' }), created() { Bus.$on('setMsg', content => { this.msg = content; }); }});
import Bus from './bus.js';export default Vue.extend({ template: ` <div @click="sendEvent">Say Hi</div> `, methods: { sendEvent() { Bus.$emit('setMsg', 'Hi Vue!'); } }});
Event bus 是一种实践,你也可以在 Vue 1.x 中使用它。
0 0
- vue父子组件通信问题解决的思路之一
- vue 父子组件通信
- vue父子组件通信
- Vue父子组件通信
- Vue父子组件通信
- vue父子组件通信
- vue父子组件之间的通信
- 总结vue父子组件之间的通信
- 关于Vue父子组件之间的通信
- 父子组件通信vue.js
- vue 非父子组件通信
- vue父子组件简单通信
- Vue父子组件通信实践
- vue 非父子组件通信
- vue开发:vue父子组件与非父子组件之间的通信
- Vue 父子组件、组件间通信
- Vue之父子、同级组件的通信详解
- Vue实践--父子组件间的通信(未完待续)
- web前端实现markdown编辑预览页面(低仿csdn博客界面)
- nfs连接目标板与主机
- Eclipse使用心得与技巧
- 什么是云计算?
- Visual Studio 2013 Tools for Unity 安装及使用
- vue父子组件通信问题解决的思路之一
- ListView控件的应用
- python中 __name__及__main()__的妙处
- Unix下五种I/O模型
- 【Java每日一题】20170228
- 【C++】《C++ Primer Plus》笔记(5)——运算符优先级
- 【STL】list迭代器的模拟实现
- 算法学习基础篇(一):搜索(DFS、BFS)
- 高效全组合算法实现