I learned about anonymous slots and named slots before .
Our task in this issue is scoped slots .
Although the scope slot is not used much, it is still very important.
We use an actual requirement to show the scope slot , because the scope slot is really not used much, and can only show its meaning in the actual requirement.
demand:
- A to-do list component has been developed, and many modules are in use
- A B
- The previous data format and reference interface remain unchanged and display normally
- New function module adds check mark
The explanation of the requirements is a bit vague, and you will know what is going on by looking at the content of the page.
<div id="app">
<App></App>
</div>
<script>
const todoList = {
data () {
return {
}
},
props: {
todos:Array,
defaultValue:[]
},
template:`
<ul>
<li v-for='item in todos' :key='item.id'>
<slot :itemValue = 'item' ></slot>
{
{item.title}}
</li>
</ul>
`
}
const App = {
data () {
return {
todoList:[{
title:'大哥你好么',
isComplate:true,
id:1
},{
title:'小弟我还行',
isComplate:false,
id:2
},{
title:'你在干什么',
isComplate:false,
id:3
},{
title:'抽烟喝酒烫头',
isComplate:true,
id:4
}]
}
},
components: {
todoList
},
template:`
<todoList :todos='todoList'>
<template v-slot='data'>
<label>{
{data}}</label>
<input type='checkbox' v-model='data.itemValue.isComplate' />
</template>
</todoList>
`
}
new Vue({
el:'#app',
data:{
},
components: {
App
}
});
</script>
First we wrote a partial component todoList . Then the more important thing is props , which we have already talked about in component communication . Then in the template template , a v-for loop of ul and li is written , and the loop is the todos collection obtained in props .
For the content of li , we still see the slot label slot , and then on the attribute of the slot label , we wrote : itemValue='item' , this thing we will put aside for now, and we will talk about this after reading the following component* *:itemValue='item'**'s role.
We also wrote an App partial component . In the data of this component , we wrote a todoList array object for displaying the content of the page at that time .
Mount the todoList component in the components property. The content in the
template template is very important , we should focus on it.
First, we call the todoList component and write : todos='todoList' on the properties of the component . This is used to communicate values between components . If you don’t understand, you can read the previous content. :todos='todoList' corresponds to props: ['todos'] . The function is to pass the todoList array object in the App component to the todoList component .
Then inside the todoList component , we wrote a template tag to occupy the slot position , which is similar to the named slot in the front . On the template label , a v-slot='data' is also written . Many students may not know what this data is for. So we will output the content of this data on the page. This has nothing to do with the realization of our needs, just to facilitate students to understand what is in this data .
After that, there is an input tag to display the data.
Let's take a look at what is rendered on the page.
We can see that a set of objects are rendered first , this is the content of data in v-slot='data' . This is where the itemValue of: itemValue='item' comes from in the todoList component we mentioned earlier. This is not fixed, the name can be changed at will. After I changed it to Value, the content of the page can also be rendered normally.
Then there is a radio button and a title for data display.
By doing this, you can easily change the content of the designated radio button without affecting other radio buttons. That is, the meaning of scope slots.
It may be a little confused to understand, because this thing is really not used much, but it plays a very important role in some specific business scenarios .
It is still necessary to keep in mind that Vue will not produce meaningless content. Anything connected with it has its corresponding application scenario and its meaning, otherwise it will not exist. This is true for any good framework .
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Pay attention to the following WeChat public account, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible No., please pay attention, thank you!
