依赖注入（provide & inject）

通常父组件向子组件传递数据时，会用到props，但是会遇到这样的问题：某个深层子组件需要较远祖先组件中的部分数据，这种情况下，如果使用props传递数据，就需要将数据沿着组件链一层层传递下去，特别麻烦，如果组件链特别长，可能很多组件与这些props都没有关系，但是为了deepchild能用这些props，仍然需要定义并且向下传递，这一问题被称为”props逐级透传”，为了避免这个问题引入了provide和inject

一个父组件相对于与其所有的子组件，会作为依赖提供者，任何后代组件，无论链路有多深，都可以注入父组件提供给整条链路的依赖

使用依赖注入的优点：

在vue.js应用中，用户可以使用provide和inject，父组件可以作为其所有子组件的依赖项提供程序，而不管组件层次结构多深。这个特性由两部分组成，父组件通过一个provide选项来提供数据，子组件通过一个inject选项来使用这个数据。这就使得我们能够更安全的继续开发vue.js组件，而不必担心可能会更改/删除子组件所依赖的某些内容。

（1）Provide（为后代提供数据，写在父组件中）

在created生命周期中，执行provide方法

在provide方法中，第一个参数为key，第二个参数为值

示例代码：

import { Options, Vue } from "vue-class-component";

import ComponentB from "./components/ComponentB";

import { provide } from "vue";

@Optioons({

    components: {

        ComponentB,

    }

});

export default class App extends Vue {

    create() {

        provide("user", "Alice");

        provide("geolocation", {

            longitude: 90,

            latitude: 135,

        })

    }

}

</script>

（2）Inject（注入父组件提供的数据，写在子组件中）

在created生命周期中，执行inject方法

Inject方法中的参数对应的是provide方法中第一个参数的key

示例代码：

<template>

    <div>user: {{ user }}</div>

    <div>geolocation: {{geolocation}}</div>

</template>

<script type="ts">

import { Options, Vue } from "vue-class-component";

import { inject } from "vue";

@Optioons({

    inject: ['user', 'geolocation']

});

export default class App extends Vue {

    create() {

        const user = inject("user");

        const geolocation = inject("geolocation");

        return { user, geolocation };

    }

}

</script>