provide/inject

作用

成对出现，在组件中可以获取祖先组件的方法/属性，不管该组件嵌套有多深。

一般来说，我们可以通过$parent来使用父组件的方法/属性，但是对于祖先组件来说，可以比较困难。

使用场景

在嵌套很深的子孙组件中，调用顶层祖先组件的刷新页面方法。

// 顶层组件 Main.vue
export default {
    ...
    provide() {
        return {
            reload: this.reload();
        }
    },
    methods: {
        reload() {
            ... // 刷新页面方法逻辑
        }
    }
}

// 嵌套很深的一个子孙组件 
export default {
    ...
    inject: ['reload'],
    methods() {
        this.reload()   // 使用顶层组件中的刷新方法
    }
}

深入

• 本身数据不具有响应式（重点-框架故意为之）
• 如果需要做到某种程度的响应式，需要将provide设置成函数，且参数为对象。

如下示例：

// 组件1 - 提供provide： 
provide() {
    return {
      returnCate: this.obj,
    }
  },
      
   data() {
    return {
      obj: {
        category: '',
      },
    }
  },
      
   methods: {
    categoryChange(val) {
      // 一定要更这种方式改某个属性
      this.obj.categoryId = val
    },
  },
 

// 组件2 - 应用inject
inject: ['returnCate'],
watch: {
    'returnCate.categoryId'(val) {
        // 监听到响应式
        console.log('change', val)
    },
  },