Я застрял, пытаясь передать данные из дочернего компонента A ($ emit) в родительский и из родительского в дочерний B (реквизиты).
Используя nuxt.js, у меня есть:
макеты / default.vue
Этот шаблон по умолчанию загрузит множество компонентов. Эти компоненты будут использоваться или нет в зависимости от переменной из дочернего элемента, переменная будет устанавливать директиву v-if.
Дети - это такие страницы, как:
страницы / блог / index.vue страницы / о / index.vue ...
Целью является то, что дочерний элемент устанавливает для родительского элемента, какие компоненты будут использоваться, флаг может быть изменен в любое время, пользователь может выбрать, что будет отображаться в области администрирования.
Я пробовал использовать локальные вычисляемые методы для дочернего компонента и vuex, не повезло с обоими.
Идея на layout / default.vue.
<template>
<div>
<TopBar v-if=showTopBar></TopBar>
<Nav v-if=showNav></Nav>
etc...
<nuxt />
</div>
</template>
<script>
import TopBar from "../components/TopBar";
import Nav from "../components/Nav";
etc...
export default {
data() {
return {
showTopBar: false,
showNav: false
etc...
};
},
}
</script>
На дочернем элементе уже есть $ emit, но не повезло.
Дочерними в этой ситуации являются страницы, и макет этих страниц будет определяться переменной из выборки в API, пользователь может изменить макет в любое время.
Цель состоит в том, чтобы иметь что-то вроде двойного пути между дочерними компонентами, например:
Вызов маршрута / блога вызовет страницы / блог / index.vue
Это отправит в layout / default.vue с помощью $ emit, какие компоненты будут отображаться (выбираются пользователем в области администрирования и извлекаются из API) и идентификатор компонента. (пример: {topBar: true, topBarID: 2})
В макетах / default.vue после получения $ emit из страниц / blog / index.vue у меня было бы, например, TopBar false, а затем не отображать его или получить true с идентификатором, этот идентификатор будет отправлен в TopBar как опора для рендеринга настроенного TopBar, созданного пользователем в админке.
Возможно, кто-нибудь покажет пример, как получить эти данные для этого конкретного сценария, пожалуйста? (Не имеет значения, если вы используете локальные переменные из дочернего компонента или vuex, просто ищите пример, как получить содержимое переменной из дочернего компонента вместо простого объекта или неопределенного объекта).
PS: Если есть лучший подход к работе с динамическими макетами, я тоже принимаю предложения.
PS2: Я знаю, что буду использовать определенный шаблон для каждой страницы, например макет / блог, макет / контакт и т. Д., Но поскольку идея заключается в создании CMS, это не подходит для этого сценария, я имею в виду, из области администратора пользователь должен иметь возможность создавать страницы, включающие или отключающие компоненты с помощью мастера страниц (идея получает что-то вроде Wix, каждая настройка компонента от пользователя будет храниться в базе данных с использованием идентификатора, а в макетах пользователь выбирает предыдущие компоненты, монтирующие страницу , в конце концов, все вызовы будут выполняться с использованием их идентификаторов), и не нужно добавлять конкретное программирование макетов, потому что эта идея установить все возможные компоненты и макеты в layout / default.vue на данный момент кажется лучшим подходом, но если это не так, мне бы хотелось увидеть другие способы достижения той же цели.
