vue3 inject 用法

在 Vue3 中，`inject` 用于从父组件中注入数据到子组件中。它的语法如下：

const app = createApp({
  // ...
});

app.provide(key, value);

app.component('child-component', {
  inject: [key],
  // ...
});

其中，`provide` 用于在根组件中提供数据，`key` 是提供数据的键，`value` 是数据的值。在子组件中使用 `inject` 来引入这些数据，`key` 数组中的每一项都是需要引入的数据的键名。

例如，我们在根组件中提供一个名为 `config` 的配置对象：

const app = createApp({
  provide() {
    return {
      config: {
        theme: 'dark',
        language: 'en',
      },
    };
  },
});

在子组件中，可以通过 `inject` 引入这个配置对象：

app.component('child-component', {
  inject: ['config'],
  // ...
});

这样，在子组件中就可以通过 `this.config` 访问到配置对象了。需要注意的是，如果注入的数据不存在，Vue3 会给出警告提示。如果需要设置默认值，可以使用 `default` 属性来设置。例如：

app.component('child-component', {
  inject: {
    config: {
      default: {
        theme: 'light',
        language: 'zh',
      },
    },
  },
  // ...
});

这样，如果父组件中没有提供 `config` 数据，子组件就会使用默认值。