<> slot
1. What slot
Slots also become content distribution use slot This is a built-in component
2. What's a slot for
Display the data in the parent component in the child component
3. How to use the slot
4. Enclose an area in a subcomponent with
5. Pass data to the slot in the child label of the parent component , If the parent component does not transfer data, then 6. Display the data in the tag directly
7. Classification of slots
Slots can be divided into three categories Default slot Named slot Scope slot
Default slot
As long as there's a place The data passed by the parent component is displayed
Named slot
to slot Label naming Then, when the parent component passes the data, it just searches by name
Examples ： Subcomponents
<template> <div> <h2> <slot name="one"> This is the space reserved for my sub assembly {{title}} </slot> </h2> <
p> My content </p> <section> Contents of the slot <slot name="two"></slot> </section> </div> </template
> <script> export default { data(){ return{ title:' who ' } } } </script>
Parent component
<template> <div id="app"> <!-- Student list --> <List> <template v-slot:one> <p>
This is my student data </p> <h3>{{name}}</h3> </template> <template> This is the title of the list </template> </
List> <!-- Classroom list --> <List></List> </div> </template> <script> import List from
"@/components/List" export default { components:{List} , data(){ return{ name:
"hello" } } } </script> <style></style>
Scope slot
1. Give the slot Bind a property Mount variables to transfer : Property name =“ variable ”
2. Pass in parent component v-slot: name =“suibian”
3.suibian. Property name to access the data passed by the subcomponent
Examples ： Subcomponents
<template> <div> <h2> <slot name="one" :objuser="obj"> {{obj.firstname}} </slot
> </h2> <p> My content </p> <section> Contents of the slot <slot name="two" :stuobj="stu"></slot> </
section> </div> </template> <script> export default { data(){ return{ obj:{
firstname:" Zhang ",lastname:" three "}, stu:{username:' Zhang San ',age:20} } } } </script>
Parent component
<template> <div id="app"> <!-- Student list --> <List> <template v-slot:one="suibian">
<p> This is my student data </p> <h3>{{suibian.objuser.lastname}}</h3> </template> <template
v-slot:two="suibian"> {{suibian.stuobj.age}} </template> </List> <!-- Classroom list --> <
List></List> </div> </template> <script> import List from "@/components/List"
export default { components:{List} , data(){ return{ name:"hello" } } } </script
> <style></style>
Technology