首页 > web前端 > js教程 > Vue多级组件使用provide/inject方法介绍

Vue多级组件使用provide/inject方法介绍

php中世界最好的语言
发布: 2018-06-01 10:39:05
原创
1202 人浏览过

这次给大家带来Vue多级组件使用provide/inject方法介绍,Vue多级组件使用provide/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 可以保证父子单向数据流的清晰性。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎样使用vue实现2048小游戏

如何使用VeeValidate在vue项目内进行表单校验功能

以上是Vue多级组件使用provide/inject方法介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板