1. Basic use:
Subassembly:
Use <slot></slot> in the child component to leave a place for the value, and you can get the value of the parent component
<template>
<div>
<strong>ERROR:</strong>
<slot></slot>
</div>
</template>
<script>
export default {
name:'soltOne'
}
</script>
<style>
</style>
parent component:
<solt-one> A bug occurred</solt-one>
2. Basic use of domain name slots
Subassembly:
Simply divided into three areas, a header, content, and tail
Both the head and the tail <slot></slot> are given a name to get a domain name
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<script>
export default {
name:'soltTwo'
}
</script>
<style>
</style>
parent component:
Under this content, as long as the p tag corresponds to the name of the subcomponent, the value can be assigned to the desired place.
Those without a name will be assigned to the position without a name in the subcomponent.
<solt-two>
<p slot="header">head information</p>
<p>Main content 1</p>
<p>Main content 2</p>
<p slot="footer">Foot information</p>
</solt-two>
There is another kind of parent component, which can realize the slot through the domain name, and use v-slot: to obtain the domain name of the child component, so as to specify the assignment, which can also add multiple pieces of content, which is more perfect than the previous method.
<solt-two>
<template v-slot:header>
<p>Header 1</p>
<p>Head information 2</p>
</template>
<p>Main content 1</p>
<p>Main content 2</p>
<template v-slot:footer>
<p>Tail message 1</p>
<p>Tail message 2</p>
</template>
</solt-two>
Notice:
The order here is based on the order of the subcomponents, the parent component follows the position of the domain name, or it appears according to the domain name of the subcomponents
The content will change with the parent component
<solt-two>
<template v-slot:footer>
<p>Header 1</p>
<p>Head information 2</p>
</template>
<p>Main content 1</p>
<p>Main content 2</p>
<template v-slot:header>
<p>Tail message 1</p>
<p>Tail message 2</p>
</template>
</solt-two>
Three how to get content from subcomponents through slot
Subassembly:
It should be noted here that the value of the subcomponent should be v-bind
<template>
<div>
<slot :son="list">
</slot>
</div>
</template>
<script>
export default {
name:'soltThree',
data(){
return{
list:[1,2,3,4,5,6,7,8,9]
}
}
}
</script>
<style>
</style>
parent component:
Four types are provided at once, and the value of the subcomponent can be traversed using v-for. Here, list1 is a new name created by itself, and son is bound to the subcomponent. The slot-scope method has gradually been eliminated. #default The method is more recommended, it looks very simple and easy to remember
The first:
<solt-three>
<template v-slot="list1">
<div>{ {list1.son}}</div>
</template>
</solt-three>
The second type:
<solt-three>
<template v-slot:default="list1">
<div>{ {list1.son}}</div>
</template>
</solt-three>
The third type:
<solt-three>
<template #default="list1">
<ul>
<li v-for="(item,index) in list1.son" :key="index">{ {item}}</li>
</ul>
</template>
</solt-three>
The fourth type:
<solt-three>
<template slot-scope="list1">
<div>{ {list1.son}}</div>
</template>
</solt-three>