Built‐In Elements - sana028/VueLearningsPoc GitHub Wiki

In vue js we have three built in elements which are used for specific tasks they are 1. <component> 2. <slot> 3. <template>

component element used to create a dynamic component using **'is'** attribute this attribute will bind the component name to component element and it will render the component as a html template or vue component.
  1. using is attribute with v-bind and adding component name to is will render the component as html template ex: you need to render two components based on a condition any one component want be active like those type of scenarios you can use the component element.
  2. we can render Vue component also in component element using** is** attribute for this you need to give as <component is="vue:component-name"></component>

Note: The v-model directive does not work with native HTML form input tags (such as or ) created with the element. 

   slot element used to show the context which is added in parent component using child component start and end tags
  when there is a change that we need to include in child component in that scenarios with out changing any changes in child component we can add that content between child component tags . 
   ex:### <childcomponent> add some data</childcomponent>
  when we send the data like this to child component using `<slot></slot>` element in child component will render the text. 
  there more ways we can send the text to child component if we want to send multiple data to child component using template with a name for the context will it render the slot differently where we want.

parent:

`  <childcomponent>`
     `<template #header>`
        `<div>something</div>`
     `</template>`
    `<p>hello</p>`
  `</childcomponent>`

child:

<slot name="header"> <slot/> //it takes those data which is without template and name

The<template>tag is used as a placeholder when we want to use a built-in directive(v-if,v-elseif the conditional directives) without rendering an element in the DOM

ex:<template v-if="conditionalvariable"></template>

⚠️ **GitHub.com Fallback** ⚠️