Vuejs一个吸引人的地方是可以进行组件化开发,避免了前端开发的无序状态。组件无法单独工作,必然会跟父子组件或兄弟组件之间进行通信,以合作实现某种功能。下面即简单介绍Vuejs组件之间的各种通信方式。
方法一、props/$emit
- 父组件向子组件传值
1 | // 父组件中 |
- 子组件向父组件传值
1 | <template> |
方法二、$emit/$on
方法三、vuex
方法四、$attrs/$listeners
方法五、provide/inject
Vue2.2.0新增API,这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。一言而蔽之:祖先组件中通过provider来提供变量,然后在子孙组件中通过inject来注入变量。
provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。
需要注意的是:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
虽说provide 和 inject 主要为高阶插件/组件库提供用例,但如果你能在业务中熟练运用,可以达到事半功倍的效果!
方法六、$parent / $children与 ref
参考链接
- Vue 组件间通信六种方式(完整版),by 浪里行舟.
- 逐行剖析 Vue.js 源码,by 难凉热血.
- Vue 组件间通信的八种方式,by ikoala.