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

I think you're looking for <slot></slot> reference

vapurrmaid
– vapurrmaid

2018-10-26 22:26:47 +00:00
Commented Oct 26, 2018 at 22:26 — vapurrmaid
– vapurrmaid, Commented Oct 26, 2018 at 22:26
what do you mean?

M Usman Nadeem
– M Usman Nadeem

2018-10-26 22:42:43 +00:00
Commented Oct 26, 2018 at 22:42 — M Usman Nadeem
– M Usman Nadeem, Commented Oct 26, 2018 at 22:42

tony19 · Accepted Answer · 2022-07-16 01:16:52Z

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>

edited Jul 16, 2022 at 1:16

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Oct 26, 2018 at 23:15

vapurrmaid

2,3072 gold badges17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vuejs show html in component like reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related