Vue 3 is a progressive framework for web development, this opensource project is a power tool in web developer kit. It's fast, lightweight and easy to learn. Version 3 has many performance upgrade from Vue 2.

Render the children

So what's childrens anyway? Childrens can be HTML elements or reusable component that are appeared between opening and closing brackets of a component. 

 <MyComponent> <p>Wlcome to My Blog</p> </MyComponent>

Here the <p> tag is the child. By default within the The opening and closing tag everything will be hidden in a Vue component.

In Reactjs we used prop.children for rendering the childrens.

Slot

To render the childrens we can use vue slots. How about caption for fancy button. 

 //FancyButton.vue <template> <div> <button> <slot/> </button> </div> </template>

In the parent component we can use it as 

 //SomeComponent.vue <template> <FancyButton> Fancy Button </FancyButton> <FancyButton> Second FB </FancyButton>  </div> </template>

It will render everything in the place of slot. Here slot is replace with childrens. We can also provide a default value for a slot

 <slot> Default content </slot>
This free site is ad-supported. Learn more
​