vuejs show html in component like reactjs

Question

suppose we have a component like this.

<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>

i try this

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

i want to show html b.w vue component tag, like we do in react. how we can achieve this

Answer 1

If I understand the question, you're looking to create a component that can accept child elements. In order to do this, use <slot></slot> in your template where you'd like child elements to be inserted. Child elements can be other components or HTML.

See the reference for more thorough details.

In your example:

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