Vue组件通讯⽗组件中通过 provide 来提供变量，然后在⼦组件中通过 inject 来注⼊变量例子

在Vue中，provide 和 inject 主要用于依赖注入，允许祖先组件向其所有子孙组件提供一个依赖，而不论组件层次有多深。这在开发高阶插件/组件库时特别有用。

以下是一个简单的例子，演示了如何在父组件中使用 provide 提供变量，并在子组件中使用 inject 注入该变量：

父组件 (Parent.vue)

vue

<template>

  <div>

    <h2>这是父组件</h2>

    <child-component></child-component>

  </div>

</template>

<script>

import ChildComponent from './Child.vue';

export default {

  name: 'Parent',

  components: {

    ChildComponent

  },

  provide() {

    return {

      // 这里我们提供了一个名为'foo'的变量

      foo: 'Hello from Parent!'

    };

  }

};

</script>

子组件 (Child.vue)

vue

<template>

  <div>

    <h3>这是子组件</h3>

    <p>从父组件注入的变量: {{ foo }}</p>

  </div>

</template>

<script>

export default {

  name: 'Child',

  inject: ['foo'] // 这里我们注入了名为'foo'的变量

};

</script>

在这个例子中，父组件通过 provide 提供了一个名为 foo 的变量，子组件通过 inject 注入了该变量，并在模板中使用了它。当父组件的 foo 变量发生变化时（尽管在这个简单的例子中它并没有变化），所有注入了 foo 的子组件都会自动更新。

 

注意：虽然 provide 和 inject 绑定并不是可响应的（它们不会触发视图更新），但你可以传递可观察的对象，这样对象的属性仍然是响应的。