如何在 nuxt.js 上从子组件获取值到父组件？

Question

我在尝试将数据从子 A ($emit) 组件传递到父组件以及从父组件传递到子 B (props) 时遇到了困难。

使用 nuxt.js 我有：

布局/default.vue

这个默认模板会加载很多组件。这些组件将根据子级的变量使用或不使用，该变量将设置 v-if 指令。

孩子们的页面如下：

页面/博客/index.vue 页面/about/index.vue ...

目标是子级在父级上设置将使用哪些组件，该标志可以随时更改，用户可以选择将在管理区域上呈现的内容。

我尝试过在子组件和 vuex 上使用本地计算方法，但两者都没有成功。

布局/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 上获取的变量定义，用户可以随时更改布局。

目标是在子组件之间有类似双向的东西，例如：

调用路由/blog将会调用pages/blog/index.vue

这将使用 $emit 将要呈现的组件（从管理区域中的用户选择并从 API 获取）和组件 ID 发送到 layout/default.vue。（示例：{topBar：true，topBarID：2}）

在从pages/blog/index.vue获取$emit后，在layouts/default.vue上，我会得到例如TopBar false，然后不渲染它，或者已经收到带有ID的true，这个Id将作为prop发送到TopBar用于在管理区域呈现用户自定义的TopBar。

有人可能会展示一个示例，说明如何针对此特定场景传递这些数据吗？（如果使用 Child 组件或 vuex 中的局部变量并不重要，只需寻找如何从 Child 获取变量内容而不是普通对象或未定义对象的示例）。

PS.：如果有更好的方法来处理动态布局，我也接受建议。

PS2.：我知道我会在每个页面使用特定的模板，例如布局/博客和布局/联系人等...但由于这个想法是制作一个 CMS，所以这不适合这种情况，我的意思是，从管理区域用户应该能够通过页面向导创建启用或禁用组件的页面（这个想法是像 Wix 一样，用户的每个组件自定义都将使用 ID 存储在数据库中，并且在布局上用户选择安装页面的先前组件，最终所有调用都将使用这些的 id 进行），并且不需要添加特定的布局编程，因为在 layout/default.vue 中设置所有可能的组件和布局的想法目前听起来是一个更好的方法，但如果不是，我很乐意看到其他方法来实现相同的目标。

Answer 1

正确的方法是：

<child-component-1 :showNav.sync="showNav">

在子组件中，您可以通过执行以下操作来更新它：

this.$emit('update:showNav', value)

父级将定义此属性：

data() {
  return {
    showNav: default_value
  }
}

您必须将该变量传递给每个子组件。每个子组件都必须将其定义为属性。

也许更好的方法是创建一个简单的store内部nuxt并使用它来容纳设置。