vue3:inject

Vue3中的provide和inject是一种新的组件通信方式，它允许父组件向子组件传递数据，而不需要通过props或事件来传递。

provide和inject是成对出现的，provide用于提供数据，inject用于注入数据。在父组件中使用provide来提供数据，然后在子组件中使用inject来注入数据。

使用provide和inject的好处是可以避免props层层传递的问题，同时也可以避免事件总线的使用，使得组件之间的通信更加简单和直接。

相关问题

[Vue warn]: inject() can only be used inside setup() or functional components.

这个警告是在 Vue.js 中使用 `inject` 函数时出现的。通常， `inject` 函数应该在 `setup()` 或函数式组件中使用。如果您在模板中使用 `inject`，则可能会触发此警告。

要解决这个问题，您可以将 `inject` 函数移到 `setup()` 中。如果您需要在模板中使用注入的值，您可以将它们暴露给模板。例如：

setup() {
  const injectedValue = inject('injectedValue')

  return {
    injectedValue
  }
}

然后，在模板中，您可以访问 `injectedValue`：

<template>
  <div>{{ injectedValue }}</div>
</template>

请注意，如果您仍然需要在非函数式组件中使用 `inject` 函数，您可以通过在组件的 `provide` 选项中提供一个对象来解决此问题。这将使您可以在组件中注入这些值。

vue3中inject

在 Vue 3 中，`inject` 函数用于从父组件中注入一个已经声明的依赖项。在父组件中使用 `provide` 声明一个依赖项后，子组件可以使用 `inject` 函数获取该依赖项。

具体来说，`inject` 函数接收两个参数：依赖项的 key 和一个可选的默认值。如果父组件中提供了该依赖项，则 `inject` 函数返回该依赖项的值，否则返回默认值。

示例代码如下：

// 父组件中提供依赖项
const app = createApp({
  provide: {
    foo: 'bar'
  }
})

// 子组件中获取依赖项
const ChildComponent = {
  inject: ['foo'],
  mounted() {
    console.log(this.foo) // 输出 'bar'
  }
}

在上面的示例中，父组件通过 `provide` 提供了一个名为 `foo` 的依赖项，子组件通过 `inject` 获取该依赖项并输出其值。如果父组件没有提供 `foo` 依赖项，`inject` 函数将返回 `undefined`，因此可以使用第二个参数指定一个默认值来避免这种情况。