Nuxt.JS 创建自定义 UI 材质组件答案

【问题标题】：Nuxt.JS Create Custom UI Material ComponentsNuxt.JS 创建自定义 UI 材质组件
【发布时间】：2021-05-27 01:08:43
【问题描述】：

在 Nuxt.JS 中，我想为我的应用程序创建一些自定义 UI 材料/组件（不是像 VUETIFY 那样的整个库）。

这是我目前的做法：

最小示例

~components/Materials/m-button.vue

<template>
    <button>
        <!-- ???? -->
    </button>
</template>

后来我想像这样使用这个材质：

<m-button>
    Button Test
</m-button>

目前，这不起作用。我还尝试将 替换为<Nuxt /> 和<nuxt-child />，但正如预期的那样，页面被放置在那里（例如index.vue），而不是文本Button Test这个例子。

我能以某种方式获得 DOM-“孩子”吗？我需要创建一个插件吗？如果是，如何？到目前为止找不到任何东西，即使是 Vue.js。

【问题讨论】：

【解决方案1】：

为此使用<slot>：

<template>
  <button>
    <slot/>
  </button>
</template>

【讨论】：