我无法尝试将数据从 Child A ($emit) 组件传递到 Parent 以及从 Parent 到 Child B (props)。
使用 nuxt.js 我有:
layouts/default.vue
这个默认模板会加载很多组件。 这些组件将根据来自子变量的变量使用或不使用,变量将设置 v-if 指令。
child 是这样的页面:
页面/博客/index.vue 页面/关于/index.vue ...
目标是 Child 在 Parent 上设置将使用什么组件,标志可以随时更改,用户可以选择将在管理区域呈现的内容。
我已经尝试在子组件和 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 上的获取变量定义,用户可以随时更改布局。
目标是在子组件之间有一些类似双向的方式,例如:
调用路由/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 将被发送到TopBar 作为 prop,用于渲染用户在 Admin 区域制作的自定义 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
}
}
您必须将该变量传递给每个子组件。每个子组件都必须将其定义为属性。
也许更好的方法是在 nuxt
中创建一个简单的 store
并使用它来存放设置。
关于javascript - 如何在 nuxt.js 上从子组件获取值到父组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57154647/