vue.js - 如何让 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

Vue component slot .

例如:

父组件:

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

一些其他组件:

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