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 并将其作为参数插入，小心正确转义等，但这似乎不太优雅。

推荐的方法是什么？

标签： vue.jsvuejs2vue-component

Answer 1

Vue组件插槽。

例如：

父组件：

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

一些其他组件：

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