vue.js - 如何在 Nuxt.js 中处理来自子页面的多个布局？

Question

我是第一次使用 Nuxt.js 和 Vue.js。所以，我想使用一个模板作为父级，它基本上需要有两列。每个 child 在两列中都有不同的数据。

layouts/content.vue:

<template>
    <b-container fluid>
        <b-row>
            <!--<b-col><nuxt/></b-col>
            <b-col><nuxt/></b-col>-->
        </b-row>
    </b-container>
</template>

假设这是子 vue 组件:

pages/some-page/index.vue:

<template>
    <div>
        <!-- how to enter data for both the columns -->
    </div>
</template>

<script>
    export default {
        layout: 'content'
    }
</script>

如何输入处理我的 content.vue 的两列？我想在某些父布局中制作两列，以便以后编辑时，我只有一个文件，所有子页面的更改都会反射(reflect)出来。

Answer 1

您不能将数据传递给布局(您可以使用 vuex)，并且您不能使用两次 <nuxt /> .您应该改用组件插槽:

layouts/content.vue :

<template>
    <b-container fluid>
        <nuxt />
    </b-container>
</template>

components/two-cols.vue :

<template>
    <b-row>
        <b-col><slot name="col-1"></slot></b-col>
        <b-col><slot name="col-2"></slot></b-col>
    </b-row>
</template>

pages/some-page/index.vue :

<template>
    <two-cols>
        <template slot="col-1>
            <!-- col-1 html here -->
        </template>
        <template slot="col-2>
            <!-- col-2 html here -->
        </template>
    </two-cols>
</template>

<script>
    import TwoCols from '~/components/two-cols.vue`
    export default {
        layout: 'content',
        components: {
            TwoCols
        }
    }
</script>