Question 27: Consider the following Vue application with markup “inde…

1<div id = "app">
2    <my-comp>
3        <template v-slot:first = "slotProps">
4            This is from {{slotProps.user.name1}} template
5        </template>
6
7        <template v-slot:default = "slotProps">
8            This is from {{slotProps.user.name3}} template
9        </template>
10
11        <template v-slot:second = "slotProps">
12            This is from {{slotProps.user.name2}} template
13        </template>
14    </my-comp>
15</div>
16<script src = "app.js"> </script>

1Vue.component("myComp", {
2    template : `<div>
3                    <p>
4                        <slot name = "first" v-bind:user="user">
5                        </slot>
6                    </p>
7                    <p>
8                        <slot v-bind:user="user">
9                        </slot>
10                    </p>
11                </div>
12               `,
13    data : function () {
14        return {
15            user : {
16                'name1' : "Rashmi's",
17                'name2' : "Akshay's",
18                'name3' : "Sumit's",
19            }
20        }
21    }
22})
23
24const app = new Vue({
25    el : "#app",
26})