In this answer, I will share what are slots. Vue implements a content distribution API using the element to serve as distribution outlets for content created after after the current Web Components spec draft.
Let’s create an alert component with slots for content insertion:
1 2 3 4 5 6 7 8 | Vue.component('alert', { template: ` <div class="alert-box"> <strong>Error!</strong> <slot></slot> </div> ` }) |
Now you can insert dynamic content as below,
1 2 3 | <alert> There is an issue with in application. </alert> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
