Provide/Inject 依赖注入(未完待续)

父组件传递给子组件数据,通过props,但是需要逐层传递
provide/Inject 的推出就是为了解决这个问题,它提供了一种组件之间共享此类值的方式,不必通过组件树每层级显示地传递props
目的是为了共享那些被 认为对于一个组件树而言是全局的数据

provide 接受两个参数:第一个参数是要注入的 key,
可以是一个字符串或者一个 symbol,第二个参数是要注入的值。

Inject 注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。

根节点向子节点传递参数

Provide/Inject 依赖注入(未完待续)_第1张图片

可以通过Provide从Root传递给DeepChild

Provide/Inject 依赖注入(未完待续)_第2张图片

APP.VUE中引入组件

Provide/Inject 依赖注入(未完待续)_第3张图片

在myprofile中引入下一层的组件helloworld

Provide/Inject 依赖注入(未完待续)_第4张图片

使用inject取出值

Provide/Inject 依赖注入(未完待续)_第5张图片

使用Symbol来避免key重复
Symbol是一种基本数据类型,函数返回symbol类型的值,该类型具有静态属性和静态方法。
每一个symbol的值 都是唯一的。

Provide/Inject 依赖注入(未完待续)_第6张图片

Provide/Inject 依赖注入(未完待续)_第7张图片

Provide/Inject 依赖注入(未完待续)_第8张图片

结果:

Provide/Inject 依赖注入(未完待续)_第9张图片

你可能感兴趣的:(vuejs,vuejs,vue.js,前端)