17 Feb 2021

What is slot element in Vuejs?

Posted by  

In this specific post, I shall tell you that what is slot element in Vuejs? & What is the main work/purpuse of this slot element under the Vue js.

What is Solt Element in Vuejs?

elite is an special element in Vuejs. That's given by Vuejs Framework to make work easy. Slots is a content distribution element/tag.

Example with Vuejs slot element tag.

Vue

HTML

<div id="vueapp">
<alert-warning class="warning">
This is a demonstration about how vue's slot element is working.
</alert-warning>

</div>

in HTML, vue app is going to initialise. alert-warning component have been put.
Now in JavaScript, i am going to registered this component.

JAVASCRIPT
<script>

Vue.component('alert-warning',{
        template : '<div><slot></slot></div>' 
   }); 

var vm = new Vue({
       el : "#vueapp",
       data : {
             }
         });
</script>

in JavaScript, alert-warning component is created with Vue.component() static method. this component is registered global scope.
in this component's template, we have used <slot></slot> element/tag.


Reaction:

No comments:

No Comments

COMMENT FROM MESSAGE