vuejs 在 reactjs 之类的组件中显示 html答案

【问题标题】：vuejs show html in component like reactjsvuejs 在 reactjs 之类的组件中显示 html
【发布时间】：2018-10-26 22:24:50
【问题描述】：

假设我们有一个这样的组件。

<template>
 <div class=" ">
   <div class="flex-grow">{{title}}</div>
   <div class=" p-5">
     <!-- want to show here -->
   </div>
 </div>

 <script>
   export default {
     props: ['title'],
     mounted() {
       console.log('Component mounted.')
     }
   }
 </script>

我试试这个

<comp :title="'here'">
 <h1> this is </h1> 
</comp>

我想显示 html b.w vue 组件标签，就像我们在 react 中所做的那样。我们如何实现这一目标

【问题讨论】：

【解决方案1】：

如果我理解这个问题，您正在寻找创建一个可以接受子元素的组件。为此，请在您希望插入子元素的模板中使用<slot></slot>。子元素可以是其他组件或 HTML。

请参阅reference 了解更多详细信息。

在你的例子中：

<template>
 <div class=" ">
   <div class="flex-grow">{{title}}</div>
   <div class=" p-5">
     <slot></slot>
   </div>
 </div>
</template>

【讨论】：