详解Vue 多级组件透传新方法provide/inject
2018-05-09 09:04
751 查看
provide / inject 是 2.2 新增的方法,可以以一个祖先组件向所有子孙后代注入依赖(一个内容)。
provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。
Vue 官方警告:
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
当然,警告只是警告,你完全可以正常使用。
使用方法非常像 data 和 props 的组合大礼包:
var Provider = { provide: { foo: 'bar' }, // ... } var Child = { inject: ['foo'], created () { console.log(this.foo) // => "bar" } // ... }
唯一的区别是你不用再一层层的传入了,过去用的 event-bus 虽然可以解决深层问题,但是会导致整个 event-emit 组成过于混乱,难以维护。使用 provide / inject 可以保证父子单向数据流的清晰性。
在 React 中 Context 的 Provider / Consumer 也有相同的效果,由于还没有具体使用过,对 React 本身也只有一面之缘,留待以后在了解,感兴趣的同学可以 阅读文档 了解。
参考文章:
Vue 官方文档
Provide/Inject in Vue 2.2
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 详解vue跨组件通信的几种方法
- 详解从新建vue项目到引入组件Element的方法
- vue全局组件与局部组件使用方法详解
- Vue官方推荐AJAX组件axios.js使用方法详解与API
- 利用vue+elementUI实现部分引入组件的方法详解
- 详解利用jsx写vue组件的方法示例
- vue父组件通过props如何向子组件传递方法详解
- 详解Vue 非父子组件通信方法(非Vuex)
- Vue.js路由组件vue-router使用方法详解
- vue组件tabbar使用方法详解
- Vue中fragment.js使用方法详解
- vue 组件的封装之基于axios的ajax请求方法
- 使用use注册Vue全局组件和全局指令的方法
- JS组件Bootstrap导航条使用方法详解
- Vue2.0子同级组件之间数据交互方法
- 详解vue 组件之间使用eventbus传值
- vue组件详解(一)——组件与复用
- .net core如何利用ConcurrentTest组件对方法进行压力测试详解
- ExtJS4组件_form表单配置-属性-方法详解
- vue 组件高级用法实例详解