如何在 nuxt.js 上从子组件获取父组件的值?
Posted
技术标签:
【中文标题】如何在 nuxt.js 上从子组件获取父组件的值?【英文标题】:How to get an value from Child component to Parent on nuxt.js? 【发布时间】:2019-11-30 22:31:48 【问题描述】:我一直在尝试将数据从子 A ($emit) 组件传递给父组件,从父组件传递给子 B (props)。
使用 nuxt.js 我有:
布局/default.vue
这个默认模板会加载很多组件。 这些组件将根据子变量的使用与否,变量将设置 v-if 指令。
子页面是这样的:
pages/blog/index.vue 页面/关于/index.vue ...
目标是 Child 在 Parent 上设置将使用哪些组件,flag 可以随时更改,用户可以选择将在管理区域呈现的内容。
我尝试在子组件和 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>
在孩子已经使用 $emit 但没有运气。
这种情况下的子页面是页面,这些页面的布局将由 API 上的 fetch 变量定义,用户可以随时更改布局。
目标是在子组件之间有类似的双向方式,例如:
调用路由/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 将发送到TopBar 作为道具,用于在管理区域呈现用户制作的自定义 TopBar。
是否有人可以举例说明如何获取此特定场景的这些数据? (使用 Child 组件或 vuex 中的局部变量无关紧要,只是寻找如何从 Child 获取变量内容而不是普通对象或未定义对象的示例。
PS.:如果有更好的方法来处理动态布局,我也接受建议。
PS2.:我知道我会在每个页面上使用特定的模板,例如布局/博客和布局/联系人等...但是由于这个想法是制作 CMS,所以这不适合这种情况,我的意思是,从管理区域用户应该能够通过页面向导创建启用或禁用组件的页面(这个想法类似于 Wix,用户的每个组件定制都将使用 ID 存储在数据库中,并且在布局上用户选择以前的组件挂载页面,最后所有调用都将使用那些的 id 进行),并且不需要添加特定的布局编程,因为此时在 layout/default.vue 中设置所有可能的组件和布局的想法听起来很更好的方法,但如果不是,我很乐意看到实现相同目标的其他方法。
【问题讨论】:
【参考方案1】:正确的做法是:
<child-component-1 :showNav.sync="showNav">
在子组件中,您可以通过以下方式更新它:
this.$emit('update:showNav', value)
父母会定义这个属性:
data()
return
showNav: default_value
您必须将该变量传递给每个子组件。每个子组件都必须将其定义为属性。
也许更好的方法是在nuxt
中创建一个简单的store
并使用它来容纳设置。
【讨论】:
感谢@Ohgodwhy 的帮助!!!我还不知道如何让它工作。根据您的提示,我启用了 vuex: export const state = () => ( layout: [ topBar: true, topBarID: 2 ] );在 layout/default.vue 上,我可以通过以下方式访问它: computed: useTopBar() return this.$store.state.blog.layout; ,这让我可以访问数组,这几乎是我要找的。我将添加一个包含更多详细信息的新回复,并更新主要问题。 使用 $emit from the Page (Child) 的要点是,新页面不需要为每个新页面添加 layout/default.vue 新计算函数。对此,只需检查页面是否发送有关将要呈现的组件以及该组件的 id 的信息,例如 topBar 和应该使用哪个(id)。我正在尝试制作像 Wordpress 这样的小型 CMS。组件 TopBar 本身将使用作为 prop 接收的 Id 获取数据以进行渲染。我不知道这对你是否有意义。如果您有更好的方法,请说。以上是关于如何在 nuxt.js 上从子组件获取父组件的值?的主要内容,如果未能解决你的问题,请参考以下文章