如何让 VueJS 组件仅作为包装器工作，而不是控制所有 html？

Question

换句话说，某个时候可能会有一个看起来像这样的 html：
<bloglink blogposturl="http://a.link" blogposttitle="my title" ></bloglink>

模板属性如下：
...
template: '<h3><i><a style="text-decoration: underline; cursor: pointer;" v-on:click="load_blog_page(blogposturl)">{{blogposttitle}}</a></i></h3>',
...

但是如果一个人想表达怎么办

<bloglink blogposturl="http://a.link" blogposttitle="my title" > 
  <p>.....complex html in here.... which is not dynamic....</p>
</bloglink>

在加载网页时希望保留此 html，而不是完全替换。

一种方法是获取这个复杂的 html 并将其作为参数插入，小心正确转义等，但这似乎不太优雅。

推荐的方式是什么？

Answer 1

Vuecomponent slot.

例如：

父组件：

<template>
    <div>
        <slot></slot>
    </div>
</template>

其他组件：

<template>
    <div>
        <parent>
            <p>whatever</p>
        </parent>
    </div>
</template>