Javascript Nuxtjs：如何在另一个组件中调用组件？

我理解范例“页面组件”，但若我有一个呈现组件的页面，那个么如何调用该组件中的另一个组件呢？目前nuxtjs不允许我这么做。我不能坚持标准的“页面组件”方案，因为我正在构建调用购物车项目的购物车

假设页面调用的购物车组件如下所示，它将如何调用其中的购物车项目组件

<!---- cart component called from index.vue --->

    <template>
        <div>
            <Cart-item></Cart-item> < ---------- This doesn't work.
        </div>
    </template>
    
    <script>
    export default {
        props: ['items']
    }
    </script>

<------------这不起作用。
导出默认值{
道具：[“道具”]
}

我以标准方式管理它：

<template>
        <div>
            <CartItem></CartItem>
        </div>
    </template>
    
    <script>
    import CartItem from  '../components/Cart-item'
    export default {
        props: ['items']
    }
    </script>

从“../components/Cart item”导入CartItem
导出默认值{
道具：[“道具”]
}

---

由于nuxtjs自动注册所有组件，因此想知道是否有更优雅的方式。

编辑：正如承诺的那样，下面是一个示例，说明如何通过

插槽将一些内容从另一个组件传递到另一个组件。这是完全工作在任何Nuxt页ofc

NestedContent.vue


这是NestedContent组件，下面是传递给ParentWithSlot组件的插槽


此内容将插入到组件ParentWithSlot中


ParentWithSlots.vue


XXXXXXXXXX插槽XXXXXXXXXX前的插槽内容

如果未提供任何内容，则为默认内容
XXXXXXXXXX插槽XXXXXXXXXX后的插槽内容


这是它的样子

PS：您也可以尝试一下，它对您的一些组件的整体视觉定位非常有用


如果您的组件位于
components
目录中，您可以在
numxt.config.js
中设置
components:true
，并且几乎可以在任何地方访问它，而无需使用
语法执行任何附加步骤

详情如下：