vue3 provide多个变量

在Vue3中，我们可以使用`provide`来提供多个变量，然后在子组件中使用`inject`来注入这些变量。下面是一个示例：

// 父组件
import { provide } from 'vue';

export default {
  setup() {
    const var1 = 'Variable 1';
    const var2 = 'Variable 2';

    provide('var1', var1);
    provide('var2', var2);

    // 其他逻辑...

    return {
      // 返回其他数据...
    };
  }
}

// 子组件
import { inject } from 'vue';

export default {
  setup() {
    const var1 = inject('var1');
    const var2 = inject('var2');

    // 使用 var1 和 var2...

    return {
      // 返回其他数据...
    };
  }
}

在父组件中，我们使用`provide`来提供两个变量`var1`和`var2`。然后在子组件中，我们使用`inject`来注入这两个变量。这样子组件就可以访问到父组件提供的这两个变量了。

相关问题

vue3响应式全局变量

### Vue 3 中创建和使用响应式全局变量

#### 创建 Vue 实例并配置全局属性

为了使全局变量具有响应性，在创建 Vue 应用实例时，应该利用 `createApp` 函数，并通过 `app.config.globalProperties` 来设置全局属性。但是需要注意的是，直接添加到这里的普通 JavaScript 属性不会自动成为响应式的[^2]。

import { createApp } from 'vue';
const app = createApp(App);
// 不推荐这样做，因为这些属性不是响应式的
app.config.globalProperties.$nonReactiveProperty = "I'm not reactive";

#### 使用 `provide` 和 `inject` 进行依赖注入

另一种方式是采用组合 API 提供的 `provide`/`inject` 对来传递可被后代组件访问的数据或功能。这种方式非常适合用于跨多个层次结构下的子组件间共享状态[^1]。

然而，当目标是在整个应用程序范围内提供服务或者公共数据时，更常见的方式还是修改应用级别的配置项。

#### 利用 `ref` 或者 `reactive` 构建响应式对象

为了让全局变量具备响应能力，应当借助 Composition API 下提供的工具函数——`ref()` 或者 `reactive()` 。前者适用于基本类型的封装；后者则适合处理复杂的数据结构如对象和数组[^4]。

下面是一个完整的例子展示怎样正确地声明以及消费这样的全局资源：

##### 定义全局响应式变量

// main.ts
import { createApp, ref, reactive } from 'vue';
import App from './App.vue';

const appInstance = createApp(App);

// 添加一个简单的字符串型响应式属性
appInstance.config.globalProperties.$message = ref('Hello World');

// 如果需要存储更多字段，则考虑使用 reactive()
appInstance.config.globalProperties.$settings = reactive({
    theme: 'light',
    language: 'en'
});

export default appInstance;

##### 在任何地方读取与更新它们

一旦上述操作完成之后，在任意组件内部就可以轻松获取到之前定义好的全局变量了：

<!-- MyComponent.vue -->
<template>
  <div>{{ $message }}</div> <!-- 显示当前的消息 -->

  <button @click="changeTheme">切换主题</button>

  {{ $settings.theme }}
</template>

<script setup lang="ts">
function changeTheme() {
  this.$settings.theme === 'dark' ? (this.$settings.theme = 'light') : (this.$settings.theme = 'dark');
}
</script>

请注意这里假设你正在使用的脚手架支持 `<script setup>` 的语法糖形式编写单文件组件(SFC)，如果不是的话可能需要调整导入逻辑。

另外值得注意的一点是，尽管 `$message` 是由 `ref` 构造而来，但在模板里可以直接当作普通的值去渲染而无需额外解包(`.value`)。这是因为 Vue 自动帮我们做了这一步转换工作。

最后提醒一点关于性能优化方面的小技巧：对于那些只读性质的全局常量来说，没有必要将其设为响应式的，除非确实存在变更的需求。

vue的provide

Vue的provide/inject是一种组件间通信的方式，它允许祖先组件向后代组件提供数据。在provide选项中，可以提供一个对象或一个函数来返回一个提供的属性。而在inject选项中，可以是一个数组、一个对象或一个带有from和default属性的对象来注入提供的属性。

使用provide/inject的好处是可以在组件层次结构中共享数据，而不需要通过props和事件来传递数据。这样可以简化组件之间的通信，并且可以在任何层级的组件中使用提供的数据。

然而，Vue官方推荐使用Vuex来管理全局状态，而不是使用原生的provide/inject。这是因为Vuex中的全局状态的每次修改是可以追踪回溯的，而provide/inject中变量的修改是无法控制的。这意味着无法确定是哪个组件修改了全局状态，这会增加耦合度并使数据变化变得不可控。在多人协作开发中，这可能会成为一个问题。

因此，尽管provide/inject是一种方便的组件通信方式，但在需要管理全局状态的情况下，Vue官方推荐使用Vuex来实现更可控的状态管理。[2]