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组件源代码

 <template>
   <div class="el-breadcrumb" aria-label="Breadcrumb" role="navigation">
     <slot></slot>
   </div>
 </template>
 <script>
   export default {
     name: 'ElBreadcrumb',

     props: {
       separator: {
         type: String,
         default: '/'
       },
       separatorClass: {
         type: String,
         default: ''
       }
     },

     provide() {
       return {
         elBreadcrumb: this
       };
     },

     mounted() {
       const items = this.$el.querySelectorAll('.el-breadcrumb__item');
       if (items.length) {
         items[items.length - 1].setAttribute('aria-current', 'page');
       }
     }
   };
 </script>

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

 <template>
   <span class="el-breadcrumb__item">
     <span
       :class="['el-breadcrumb__inner', to ? 'is-link' : '']"
       ref="link"
       role="link">
       <slot></slot>
     </span>
     <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>
     <span v-else class="el-breadcrumb__separator" role="presentation">{{separator}}</span>
   </span>
 </template>
 <script>
   export default {
     name: 'ElBreadcrumbItem',
     props: {
       to: {},
       replace: Boolean
     },
     data() {
       return {
         separator: '',
         separatorClass: ''
       };
     },

     inject: ['elBreadcrumb'],

     mounted() {
       this.separator = this.elBreadcrumb.separator;
       this.separatorClass = this.elBreadcrumb.separatorClass;
       const link = this.$refs.link;
       link.setAttribute('role', 'link');
       link.addEventListener('click', _ => {
         const { to, $router } = this;
         if (!to || !$router) return;
         this.replace ? $router.replace(to) : $router.push(to);
       });
     }
   };
 </script>