VueJS - 在组件中呈现动态传递的模板答案

【问题标题】：VueJS - Render dynamically passed template in componentVueJS - 在组件中呈现动态传递的模板
【发布时间】：2018-01-14 22:28:28
【问题描述】：

我正在使用 VueJS 2 来构建拖放式布局构建器。该项目的要求之一是能够拥有一些允许自定义内容存在于其中的组件（它们将只是该内容的包装器）。具体来说，我正在尝试传入并渲染另一个在 可拖动 组件中实现的拖放区域。

基本上，我想通过 prop 将 VueJS 模板传递给组件，并在组件内部呈现该模板。这是必要的，因为我不希望 UI 限制开发人员的需求，因此需要它真正可扩展。

在下面的简单示例中，我希望“ui-element”在其中呈现内容道具并将另一个道具用作数据输入。

<ui-element
    :content="<draggable :name="contentData"></draggable>"
    contentData="col1"
>
</ui-element>

由于只是输出模板会转义它，并且 v-html 指令会将其视为常规 HTML 而不是模板，我迷路了，不确定如何完成。

我花了大约一个小时或更长时间在谷歌上搜索，但没有运气。这让我有三个选择：
1) 我是第一个需要这个复杂用例的人（不太可能）
2）这样做在很多层面上都是愚蠢的，甚至没有人打扰（如果是这样，请让我知道如何以更智能的方式获得此结果）
3) 有一个特殊的超酷 JS 术语我根本不知道，这让我的搜索尝试徒劳

【问题讨论】：

【解决方案1】：

您想改用slots。

在您的 ui-element 组件中，定义一个插槽，如下所示：

<template>
  <div>
    <slot name="content"></slot>
  </div>
</template>

然后你可以像这样传入draggable 组件：

<ui-element contentData="col1">
  <draggable :name="contentData" slot="content"></draggable>
</ui-element>

【讨论】：