There are already many articles about slot-scope on Baidu, but I feel that they are all those who have not learned well before and have returned to learn. They all use .Vue files. I think it is a bit unsuitable for beginners, so I will write an article suitable for beginners.
First throw routine:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Component pass slot(slot)Distribute content</title>
<script src="Your vue address, please download the latest version"></script>
<script>
("test-slot",{
// Slots allow default content template:
`<div>
<strong>Error!</strong>
<slot></slot>
</div>
`,
data:function () {
return {
name:"perry"
}
}
});
// Named slot ("slot-name",{
template:
`<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot ></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
});
// Scope slot ("todo-list",{
inheritAttrs:false,
props:{
todos:[Array,Object]
},
template:
`<ul>
<li v-for="todo in todos" :key="" style="display: block;" >
<slot :data="todo">{{}}</slot>
</li>
</ul>
`
});
</script>
<style>
li{
list-style: none;
display: inline-block;
font-size: 25px;
}
</style>
</head>
<body>
<div >
<!--1、Slot content slotCan receive any content、Code，Includes components-->
<test-slot>Something bad happened.Who are you，Do I know you</test-slot>
<test-slot>
Something bad happened.
<!--Allow variables，However, this variable must be in this scope to take effect，herenameThe value will be"Crossroad"-->
<h3>title{{name}}</h3>
<img src="img/" alt="Image cannot be displayed">
</test-slot>
<!--2、Named slots sloThere is a special propertyname,Can make the slot name-->
<slot-name>
<h3>Advise to learn</h3>
<p>Don't work hard when you are young，The old man is sad</p>
<p>Time flies，The sun and the moon are like shuttles</p>
<template slot="header">
<ul >
<li>Home page</li>
<li>About time</li>
<li>About life</li>
<li>About the Future</li>
</ul>
</template>
<p>hello</p>
<p slot="footer">
<p>Ending</p>
<p>GuangdongICPPrepare6545646456415</p>
</p>
</slot-name>
<!--Use scope slots，passslot-scopeaccomplish-->
<todo-list :todos="todos">
<template slot-scope="slotProps">
<span v-if="">√</span>
{{}}
</template>
</todo-list>
<!--useES2015Structural syntax-->
<todo-list :todos="todos">
<template slot-scope="{data}">
<span v-if="">√</span>
{{}}
</template>
</todo-list>
</div>
<script>
new Vue({
el:"#app",
data:{
name:"Crossroad",
todos:[
{text:"A",id:1,isTrue:true},
{text:"B",id:2,isTrue:true},
{text:"C",id:3,isTrue:false},
{text:"D",id:4,isTrue:true},
],
// slotProps:""
}
})
</script>
</body>
</html>
In the routine, ordinary slots and named slots are also written. I won’t talk about this, I will just talk about scope slots. First of all, start with the name "scope slot". Originally, the template of your parent component cannot use the data in the child component template. There is a sentence in the official website that emphasizes particularly: everything in the parent component template will be compiled within the parent scope; everything in the child component template will be compiled within the child scope. This sentence is actually quite difficult to understand, just give an example,
<test-slot>
Something bad happened.
<!--Allow variables，However, this variable must be in this scope to take effect，herenameThe value will be"Crossroad"-->
<h3>title{{name}}</h3>
<img src="img/" alt="Image cannot be displayed">
</test-slot>
This is my example above, that is, the name must be in the current component, and cannot be the data inside the test-slot component. This is its scope limitation. The data of name belongs to the scope of the parent component, so it can only be the data of the parent component. However, the emergence of slot-scope implements that the parent component calls the data inside the child component, and the data of the child component is passed to the parent component through the slot-scope property.
// Scope slot ("todo-list",{
inheritAttrs:false,
props:{
todos:[Array,Object]
},
template:
`<ul>
<li v-for="todo in todos" :key="" style="display: block;" >
//Here: data="todo" means that the data of the child component todo is passed to the parent component <slot :data="todo">{{}}</slot>//It is the default value, the parent component will overwrite it </li>
</ul>
`
});
<!--Use scope slots，passslot-scopeaccomplish-->
<todo-list :todos="todos">
<template slot-scope="slotProps">
<span v-if="">√</span>
{{}}
</template>
</todo-list>
This is how it is used. Data named todo from the child component with a value of todo will be received by slot-scope. It should be noted that slot-scope receives an object, named slotProps here, which means that the data you pass through will be used as a property of slotProps, so data needs to be called. As mentioned earlier, the value of data is todo. What is todo? todo is traversed by todos, so it is an object.
new Vue({
el:"#app",
data:{
name:"Crossroad",
todos:[
{text:"A",id:1,isTrue:true},
{text:"B",id:2,isTrue:true},
{text:"C",id:3,isTrue:false},
{text:"D",id:4,isTrue:true},
],
// slotProps:""
}
})；
We have already understood the slot-scope feature, so what are its application scenarios? We can imagine that someone else has written a component, which has been encapsulated, but he feels that the display style of the data is defined by the user, just like we above, we hope that the style of the list is defined by the user, for example, I added a √ number. At the beginning, the initial data was passed in, but the data must be processed by the subcomponent. The person who writes the component must want to display the processed data. At this time slot-scope is extremely important.
Summarize
This is the end of this article about in-depth understanding of slot-scope in Vue. For more related content on Vue slot-scope, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!