vue 依赖注入

• 父组件

<template>
  <div>
    <child-com></child-com>
  </div>
</template>

<script>
export default {
  provide: function() {
    return {
      changeMy: this.changeMy
    };
  },
  components: {
    ChildCom: () => import("./Components/ChildCom")
  },
  methods: {
    changeMy() {
      console.log(666);
    }
  }
};
</script>

• 子组件

<template>
  <div>
    <button @click="changeMy">点击</button>
  </div>
</template>

<script>
export default {
  inject: ['changeMy']
};
</script>

说明：
依赖注入方法很像我们去操作$parent property ，同比而言，依赖注入比较有好的扩展到更深层次的嵌套组件上，而我们的$parent想嵌套更深层次的组件时就需要不停的拼接$parent。
依赖注入提供给我们两个实例选项： provide 和 inject。provide 选项允许我们指定我们想要提供给后代组件的数据/方法，在任何后代组件中我们都可以使用inject选项来接收指定的我们想要添加在这个实例上的property。这样的话我们就不必暴露我们的整个父组件实例。这允许我们更好的持续研发该组件，而不需要担心我们可能会改变/移除一些子组件依赖的东西。同时这些组件之间的接口是始终明确定义的，就和 props 一样。

vue官方提醒：
然而，依赖注入还是有负面影响的。它将你应用程序中的组件与它们当前的组织方式耦合起来，使重构变得更加困难。同时所提供的 property 是非响应式的。这是出于设计的考虑，因为使用它们来创建一个中心化规模化的数据跟使用 $root做这件事都是不够好的。如果你想要共享的这个 property 是你的应用特有的，而不是通用化的，或者如果你想在祖先组件中更新所提供的数据，那么这意味着你可能需要换用一个像 Vuex 这样真正的状态管理方案了。