Nuxt.js как передать параметр из page в layout
К примеру нужно вывести блок под хедером в layout. Но как передать в этот компонент переменные из page'a в layout?
Создадим компонент в папке component, назовём его AppHeader.vue
<template>
<div>
<h1>{{headerData.title}}</h1>
<p>{{headerData.subtitle}}</p>
</div>
</template>
<script>
export default {
name: "AppHeader",
props: {
headerData: {
type: Object,
required: true
}
},
}
</script>
Подключим его в шаблоне передав объект с переменными и проверкой на существованием, иначе выйдет ошибка на страницах где эти переменные не указали
<AppHeader :header-data="headerData" v-if="headerData" />
Там же в скрипте шаблона пишем:
<script>
export default {
// ..
// Динамически подключаем компонент
components: {
AppHeader: () => {
return import('~/components/AppHeader');
}
},
computed: {
headerData() {
return this.$route.matched.map(r => {
return r.components.default.options.headerData
})[0]
}
}
//..
}
</script>
Ну и на самой странице передадим эти значения:
<script>
export default {
//..
headerData: {
title: "Заголовок страницы",
subtitle: "Подзаголовок страницы"
},
//..
}
</script>
Опубликовано 5 апреля 2021 г. в категории: NuxtJS
Если Вам необходимо внедрить данную разработку на свой проект, свяжитесь со мной, обсудим цену и срок.
Связаться со мной
