Vue JS 文本插值表达式返回 html 或组件

Question

如何使用文本插值在模板中呈现组件？我尝试了以下代码：

<template>
   <div> {{ booleanValue ? "<my-component />" : "Some Text" }} </div>
</template>

但这是使用 "double mustaches" 打印实际代码，删除组件标签并渲染组件。

{{ booleanValue ? "" : "Some Text" }}

Answer 1

我仍然不知道如何使用文本插值来做到这一点，但我找到了一种更简单的方法：Conditional Rendering

 <div v-if="booleanValue"> 
    <my-component /> 
 </div>
 <div v-else>Some Text</div>

Vue JS text interpolation expression returning html or component