VueJS - 在计算属性中生成组件的html字符串

Question

我正在寻找关于将组件数据生成为html字符串的更简洁方法的建议，并将其原始传递给组件的道具。

component-a.js
import componentB from './component-b'  



computed: {
  tooltipHTML() {
    render "<componentB :name='user1'/>
  }
}

我更喜欢类似于上述想法的东西。

Answer 1

在计算属性中生成HTML并将其作为props传递给要在该组件中呈现的另一个组件将不起作用。

您要找的是Slots

由于未提供完整代码，我猜你想在另一个组件（工具提示组件）中呈现<componentB :name='user1'/>

您将使用插槽执行以下操作：

<tooltip-comp>
    <componentB :name='user1'/>
</tooltip-comp>

在工具提示组件中

//tooltip component

<template>
    <div class="my-tooltip">
        <p>my tooltip</p>
        <slot></slot>
    </div>
</template>