vue项目中provide和inject的运用

类型：

• provide：Object | () => Object
• inject：Array<string> | { [key: string]: string | Symbol | Object }

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深（也就是父级以下所有子组件都可以通过inject得到父组件的数据），并在起上下游关系成立的时间里始终生效。 

provide 是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性, 

inject 选项是：

• 一个字符串数组，或
• 一个对象，对象的 key 是本地的绑定名，value 是：
  • 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
  • 一个对象，该对象的：
    • from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
    • default 属性是降级情况下使用的 value

这里举栗子 elementUI breadcrumb组件源代码

 1 <template>
 2   <div class="el-breadcrumb" aria-label="Breadcrumb" role="navigation">
 3     <slot></slot>
 4   </div>
 5 </template>
 6 <script>
 7   export default {
 8     name: 'ElBreadcrumb',
 9 
10     props: {
11       separator: {
12         type: String,
13         default: '/'
14       },
15       separatorClass: {
16         type: String,
17         default: ''
18       }
19     },
20 
21     provide() {
22       return {
23         elBreadcrumb: this
24       };
25     },
26     
27     mounted() {
28       const items = this.$el.querySelectorAll('.el-breadcrumb__item');
29       if (items.length) {
30         items[items.length - 1].setAttribute('aria-current', 'page');
31       }
32     }
33   };
34 </script>

子组件将获取到父组件的this，这样就可以得到父组件的数据 

 1 <template>
 2   <span class="el-breadcrumb__item">
 3     <span
 4       :class="['el-breadcrumb__inner', to ? 'is-link' : '']"
 5       ref="link"
 6       role="link">
 7       <slot></slot>
 8     </span>
 9     <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>
10     <span v-else class="el-breadcrumb__separator" role="presentation">{{separator}}</span>
11   </span>
12 </template>
13 <script>
14   export default {
15     name: 'ElBreadcrumbItem',
16     props: {
17       to: {},
18       replace: Boolean
19     },
20     data() {
21       return {
22         separator: '',
23         separatorClass: ''
24       };
25     },
26 
27     inject: ['elBreadcrumb'],
28 
29     mounted() {
30       this.separator = this.elBreadcrumb.separator;
31       this.separatorClass = this.elBreadcrumb.separatorClass;
32       const link = this.$refs.link;
33       link.setAttribute('role', 'link');
34       link.addEventListener('click', _ => {
35         const { to, $router } = this;
36         if (!to || !$router) return;
37         this.replace ? $router.replace(to) : $router.push(to);
38       });
39     }
40   };
41 </script>