vue setup provide
时间: 2023-11-24 20:08:37 浏览: 27
`vue setup provide` 是 Vue 3 中的一种新特性,用于在应用程序的根组件之外提供全局配置。它允许我们在应用程序中的任何地方使用 provide 和 inject 来共享数据和方法。
在 Vue 2 中,我们通常使用 Vuex 或 props 来实现组件间的状态共享。而在 Vue 3 中,我们可以使用 `vue setup provide` 来实现更简洁的方式。
下面是一个示例:
```vue
// App.vue
<template>
<div>
<h1>{{ message }}</h1>
<ChildComponent />
</div>
</template>
<script setup>
import { provide, ref } from 'vue';
// 提供全局数据
const message = ref('Hello, world!');
provide('message', message);
</script>
// ChildComponent.vue
<template>
<div>
<h2>{{ injectedMessage }}</h2>
</div>
</template>
<script setup>
import { inject } from 'vue';
// 注入全局数据
const injectedMessage = inject('message');
</script>
```
在上述示例中,我们使用 `provide` 在根组件中提供了一个名为 `'message'` 的数据。然后在子组件中使用 `inject` 来注入该数据并使用它。