提供/注入

对于一些深嵌套的组件，我们可以使用 provide 和 inject 。父组件可以作为其所有子组件的依赖项提供程序，而不管组件层次结构有多深。这个特性有两个部分：

  • 父组件有一个 provide 选项来提供数据 provide: { msg: xxx }
  • 子组件有一个 inject 选项来开始使用这个数据 inject: [‘msg’]
  • 案例：
    1. <template id="son">
    2.       <div>{{msg}}{{HongBao}}</div>
    3. </template>
    ```javascript const app = Vue.createApp({}); app.component(“Father”, { template: “#father”, data() {
    1.   return {
    2.       say: "这是我给我孙子的红包",
    3.   };
    }, provide: {
    1.   msg: '这是我给我孙子的压岁钱',
    2.   HongBao: 8888
    } });

app.component(“Son”, { template: “#son”, inject: [“msg”, “HongBao”], console.log(this.msg,this.HongBao) // ..的压岁钱,8888 使用{{msg}}、{{HongBao}}直接使用 });

// 其他组件… app.component(“Hra”, { template: “#hra”, }); app.component(“Hrb”, { template: “#hrb”, });

  1. 如果要访问实例property，我们需要将provide转换成返回对象的函数
  2. ```javascript
  3. app.component("Father", {
  4.     template: "#father",
  5.     data() {
  6.         return {
  7.             say: "这是我给我孙子的红包",
  8.         };
  9.     },
  10.     provide() {
  11.                 return{
  12.                 msg: this.say,
  13.               HongBao:8888,
  14.         }
  15.     }
  16. });
  18. app.component("Son", {
  19.     template: "#son",
  20.     inject: ["msg", "HongBao"],
  21.       console.log(this.msg,this.HongBao) // ..的红包,8888 使用{{msg}}、{{HongBao}}直接使用
  22. });

官方文档
这使我们能够更安全地继续开发该组件，而不必担心可能会更改/删除子组件所依赖的某些内容，这些组件之间的接口仍然是明确定义的，就像prop一样。

实际上，我们可以将依赖注入看作是”long range props”，除了：

  • 父组件不需要知道哪些子组件使用它提供的property
  • 子组件不需要知道 inject property来自那里