我一直在尝试将数据从 Child A ($emit) 组件传递给 Parent 以及从 Parent 传递给 Child B (props)。

使用 nuxt.js 我有:

布局/default.vue

这个默认模板会加载很多组件。
这些组件将根据子代的变量使用与否,变量将设置 v-if 指令。

child 是这样的页面:

页面/博客/index.vue
页面/关于/index.vue
...

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

我曾尝试在子组件和 vuex 上使用本地计算方法,但两者都没有运气。

关于 layouts/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>



child 已经使用了 $emit 但没有运气。

这种情况下的 child 是页面,这些页面的布局将由 API 上的 fetch 变量定义,用户可以随时更改布局。

目标是在子组件之间有类似的双重方式,例如:

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

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

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

有人可能会举例说明如何为这个特定场景获取这些数据吗?
(是否使用来自 Child 组件或 vuex 的局部变量无关紧要,只是寻找一个示例如何从 Child 获取变量的内容而不是普通对象或 undefined object )。

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

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

最佳答案

正确的做法是:

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

在子组件中,您将通过执行以下操作来更新它:
this.$emit('update:showNav', value)

父级将定义此属性:
data() {
  return {
    showNav: default_value
  }
}

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

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

关于javascript - 如何在 nuxt.js 上从子组件获取值到父组件?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57154647/

10-11 23:31
查看更多