在
Nuxt 3中，页面与
布局之间可以通过多种方式进行参数传递。以下是几种常见的方法：
### 1. 使用`useState`进行状态管理
Nuxt 3引入了`useState`，它可以在组件之间共享状态。你可以在
布局组件中定义一个状态，然后在页面组件中修改这个状态。
**
布局组件（layouts/default.vue）：**
```vue
<template>
<div>
<header>{{ title }}</header>
<slot />
</div>
</template>
<script setup>
import { useState } from &#
39;#app&#
39;;
const title = useState(&#
39;title&#
39;, () => &#
39;默认标题&#
39;);
</script>
```
**页面组件（pages/index.vue）：**
```vue
<script setup>
import { useState } from &#
39;#app&#
39;;
const setTitle = useState(&#
39;title&#
39;);
setTitle.value = &#
39;页面标题&#
39;;
</script>
<template>
<div>
<h1>这是首页</h1>
</div>
</template>
```
### 2. 使用`provide`和`inject`
`provide`和`inject`是Vue
3提供的一种依赖注入方式，可以在组件树中传递数据。
**
布局组件（layouts/default.vue）：**
```vue
<template>
<div>
<header>{{ title }}</header>
<slot />
</div>
</template>
<script setup>
import { provide } from &#
39;vue&#
39;;
const title = ref(&#
39;默认标题&#
39;);
provide(&#
39;title&#
39;, title);
</script>
```
**页面组件（pages/index.vue）：**
```vue
<script setup>
import { inject } from &#
39;vue&#
39;;
const title = inject(&#
39;title&#
39;);
title.value = &#
39;页面标题&#
39;;
</script>
<template>
<div>
<h1>这是首页</h1>
</div>
</template>
```
###
3. 使用`props`
你可以在
布局组件中定义`props`，然后在页面组件中传递这些`props`。
**
布局组件（layouts/default.vue）：**
```vue
<template>
<div>
<header>{{ title }}</header>
<slot />
</div>
</template>
<script setup>
const props = defineProps({
title: {
type: String,
default: &#
39;默认标题&#
39;
}
});
</script>
```
**页面组件（pages/index.vue）：**
```vue
<script setup>
import { ref } from &#
39;vue&#
39;;
const title = ref(&#
39;页面标题&#
39;);
</script>
<template>
<DefaultLayout :title="title">
<h1>这是首页</h1>
</DefaultLayout>
</template>
```
### 4. 使用Vuex或Pinia进行全局状态管理
如果你的应用比较复杂，可以使用Vuex或Pinia进行全局状态管理。
**Vuex示例：**
```javascript
// store/index.js
export const state = () => ({
title: &#
39;默认标题&#
39;
});
export const mutations = {
setTitle(state, title) {
state.title = title;
}
};
```
**
布局组件（layouts/default.vue）：**
```vue
<template>
<div>
<header>{{ title }}</header>
<slot />
</div>
</template>
<script setup>
import { mapState, mapMutations } from &#
39;vuex&#
39;;
const { title } = mapState([&#
39;title&#
39;]);
const { setTitle } = mapMutations([&#
39;setTitle&#
39;]);
</script>
```
**页面组件（pages/index.vue）：**
```vue
<script setup>
import { mapMutations } from &#
39;vuex&#
39;;
const { setTitle } = mapMutations([&#
39;setTitle&#
39;]);
setTitle(&#
39;页面标题&#
39;);
</script>
<template>
<div>
<h1>这是首页</h1>
</div>
</template>
```
扫一扫
1985
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
