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

我一直在尝试将数据从子组件A（$emit）传递到父组件，并从父组件传递到子组件B（props）

使用nuxt.js，我有：

布局/default.vue

此默认模板将加载许多组件。 这些组件是否使用取决于子变量，该变量将设置v-if指令

这些子页面如下所示：

pages/blog/index.vue pages/about/index.vue

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

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

关于layouts/default.vue的想法

等
从“./组件/TopBar”导入TopBar；
从“./组件/Nav”导入Nav；
等
导出默认值{
数据（）{
返回{
showTopBar:false，
showNav:错误
等
};
},
}

孩子们已经使用了$emit，但没有运气

这种情况下的子页面是页面，这些页面的布局将由API上的获取变量定义，用户可以随时更改布局

目标是在子组件之间具有类似双向的功能，例如：

调用route/blog将调用pages/blog/index.vue

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

在layouts/default.vue上，在获取$emit from pages/blog/index.vue后，我会将TopBar设置为false，然后不渲染它，或者使用ID接收到true，该ID将作为属性发送到TopBar，以渲染用户在管理区域创建的自定义TopBar

有没有可能有人举个例子来说明如何获得通过这些数据的具体塞纳里奥请？ （无论是使用子组件中的局部变量还是vuex，都无关紧要，只需查看如何从子组件而不是普通对象或未定义对象中获取变量内容的示例即可）

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

---

PS2：我知道我会在每页使用特定的模板，比如版面/博客和版面/联系人等。。。但是，由于这个想法是制作一个CMS，这不适合这个场景，我的意思是，从管理区域，用户应该能够通过页面向导创建页面启用或禁用组件（想法是获得类似Wix的东西，用户定制的每个组件都将使用Id存储在数据库中，用户在布局上选择之前安装页面的组件，最后所有调用都将使用这些组件的Id进行），不需要添加特定的布局编程，因为在layout/default.vue中设置所有可能的组件和布局的想法目前听起来是一个更好的方法，但如果不是，我希望看到其他方法来实现相同的目标。

正确的方法是：

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

父级将定义此属性：

data() {
  return {
    showNav: default_value
  }
}

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

---

也许更好的方法是在

nuxt

中创建一个简单的

存储

，并使用它来存放设置。

感谢@Ohgodwhy！！！我还不知道如何让它工作。根据您的提示，我已经启用了vuex：export const state=（）=>（{layout:[{topBar:true，topBarID:2}]））；在layout/default.vue上，我可以使用以下命令访问它：computed:{useTopBar（）{返回此值。$store.state.blog.layout；}}，这使我可以访问数组，这几乎就是我要寻找的。我将添加一个包含更多详细信息的新答复，并更新主要问题。使用点$emit from Page（Child）对于新页面，这种方式不是必需的添加到布局/default.vue为每个新页面添加新的计算函数。输入此方法后，只需检查页面是否发送有关将呈现哪个组件的信息以及此组件的id，例如topBar和应使用哪个组件（id）。我正在尝试将Wordpress之类的东西制作成小型CMS。组件TopBar本身将获取数据，以便使用作为道具接收的Id进行渲染。我不知道这对您是否有意义。如果您有更好的方法，请说。

data() {
  return {
    showNav: default_value
  }
}