前言
最近在看 element-ui 的源码, 发现了一个这样的属性: inject. 遂查看官网 provider/inject https://cn.vuejs.org/v2/api/#provide-inject
provider/inject: 简单的来说就是在父组件中通过 provider 来提供变量, 然后在子组件中通过 inject 来注入变量.
需要注意的是这里不论子组件有多深, 只要调用了 inject 那么就可以注入 provider 中的数据. 而不是局限于只能从当前父组件的 prop 属性来获取数据.
下面我们来验证下猜想:
first: 定义一个 parent component
- <template>
- <div>
- <childOne></childOne>
- </div>
- </template>
- <script>
- import childOne from '../components/test/ChildOne'
- export default {
- name: "Parent",
- provide: {
- for: "demo"
- },
- components:{
- childOne
- }
- }
在这里我们在父组件中 provide for 这个变量.
second 定义一个子组件
- <template>
- <div>
- {{demo}}
- <childtwo></childtwo>
- </div>
- </template>
- <script>
- import childtwo from './ChildTwo'
- export default {
- name: "childOne",
- inject: ['for'],
- data() {
- return {
- demo: this.for
- }
- },
- components: {
- childtwo
- }
- }
- </script>
third 定义另一个子组件
- <template>
- <div>
- {{demo}}
- </div>
- </template>
- <script>
- export default {
- name: "",
- inject: ['for'],
- data() {
- return {
- demo: this.for
- }
- }
- }
- </script>
在 2 个子组件中我们使用 jnject 注入了 provide 提供的变量 for, 并将它提供给了 data 属性.
这里官网注明例子只工作在 vue 2.2.1 或更高版本. 低于这个版本时, 注入的值会在 props 和 data 初始化之后得到.
运行之后看下结果
从上面这个例子可以看出, 只要在父组件中调用了, 那么在这个父组件生效的生命周期内, 所有的子组件都可以调用 inject 来注入父组件中的值.
来源: http://www.jb51.net/article/139769.htm