vuejs在类似reactjs的组件中显示html

Question

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

<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中所做的那样。 我们如何实现这一目标

Answer 1

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

有关更详尽的信息，请参见reference。

在您的示例中：

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