如何在JavaScript变量中赋值JavaScript代码块？

Question

我需要将块或javaScript代码分配到javascript变量中，以便在Vue模板中显示如下所示的块。

​

但是在js变量中添加一个HTML代码块是可以的，但是当我需要分配HTML/jsx和javascript时，它会出现一个错误。例如：

contextualVariation:
    <template>
        <Badge
            v-for="varient in colors"
            :key="varient.color"
            :color="varient.color"
            :colorName="varient.colorName"
            class="mr-2"
         />
    </template>

到目前为止，它没有提供错误。但当我试着：

<template>
    <Badge
        v-for="varient in colors"
        :key="varient.color"
        :color="varient.color"
        :colorName="varient.colorName"
        class="mr-2"
    />
</template>

<script>
      . . . . some codes . . . .
</script>

现在它给出了一个错误。如何解决这个问题？提前谢谢。

注意:我打算在实时预览中使用这个变量，如：

<live-preview :code=contextualVariation showCode="true" class=""/>

Answer 1

如果我做得对，您想要在实时预览中呈现上下文变化，如下所示：

<live-preview> <contextual-variation :colors="colors"></contextual-variation> </live-preview>

我不知道为什么必须将Vue组件作为支柱变量传递给另一个组件。你能提供更多的信息吗？