Slot meaning: that is, after the introduction of subcomponents, or the tag information is added in the element sub-assembly is inserted, so that the specified position information or sub-assembly is inserted into the label
There are three slots: the default slot named slot, scope slots, slot due to be modified vue2.6.0, but compatible versions prior to 2.6.0, Bowen explained the slot only after 2.6.0, behind vue3.0 removes compatible versions before 2.60
First, the default slot
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>默认插槽</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<tode-item>这是一个默认插槽<h3>This tag is H3 </ H3> </ Tode-Item>
</ body>
</ div>
<Script type =" Text / JavaScript " >
// subassembly
Vue.component ( ' Tode-Item ' , {
Template: ` <div>
<slot> there is the default value of slot </ slot> // Local introduced when no write assembly SUMMARY slot, slot displays subassembly default values, if no default value is useless to write the contents of slots, the slot is empty.
</ div> `
});
var App = new new Vue ({
EL : " #app " ,
Data: {
Message: ' ! Hello World '
}
});
</ Script>
</ HTML>
Second, the slot named: a plurality of slots in a sub-assembly, through achieve the specified name correspond to the slot mode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>具名插槽</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
这是2.After 60 version v <my-component>slot introduction slot name
-
<template v-slot:first>nihao</template>
<template v-slot:last>hi</template>
</my-component>
<!-- 这是具名插槽缩写方案 v-slot:缩写为 # -->
<my-component>
<template #first>nihao</template>
<template #last>hi</template>
</my-component>
</div>
</body>
<script type="text/javascript">
Vue.component('my-component',{
template: `
<div>
<h4> This is the first named slot </ h4> '
<slot name =first'></slot>
<H4> This is the second named slots </ H4>
<slot name = ' AST ' > </ slot>
</ div> `
})
the let App = new new Vue ({
EL: " #app " ,
Data: {
}
})
</ Script>
</ HTML>
Third, the scope slots: data assembly or subassembly props the sub data transmitted in the slot in the parent assembly using
1) two attributes are combined into a v-slot: 'pass over the value' = slot names.
2) Components page content slot unchanged.
3) v-slot can not be used in html tags.
4) If the default socket can be written v-slot = 'xxx'.
5) also increased the content can be deconstructed slot props and set default values, you can view the official website of the specific deconstruction slot
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>作用域插槽</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- <script type="text/javascript" src="vue.js"></script> -->
</head>
<body>
<div id="app">
<My-Component: Message = ' MSG ' >
<- val name here is just taken, does not correspond to any Local ->!
<Template V-slot: ListBox = ' val ' >
<P> {{ }} val.send.text </ P>
</ Template>
<-! Thing here is the name just taken, does not correspond to any local ->
<div slot = ' sayWhat ' slot-scope = ' Thing ' > this is written before 2.60: thing.said {{}} </ div>
<- bulk loop slot is non-note slot for the best slot scope subassembly is batch cycle, the subassembly! invalid in the case, sub-assemblies slot we think: If only pass a value, there is no need to use slot? Write directly on the line in the sub-assembly, why many times in one fell swoop. ->This wording is invalid
<div V-slot: sayWhat = ' Thing ' > said: thing.said {{}} </ div> ->
! <- This is an invalid wording
<template v-slot: sayWhat = ' Thing ' >
{} {} thing.said
</ Template> ->
</ My-Component>
</ div>
</ body>
<Script type = " text / JavaScript " >
Vue.component ( ' MY- Component ' , {
Template: `
<div>
<slot name='listbox' v-for='value in list' :send='value'></slot>
<slot name='sayWhat' :said='message'></slot>
</div>
`,
props:['message'],
data(){
return {
list:[
{
"id":10,
"text":"苹果"
},{
"id":20,
"text":"香蕉"
},{
"id":30,
"text":"梨"
},{
"id":40,
"text":"芒果"
},
]
}
}
})
The let App = new new Vue ({
EL: " #app " ,
Data: {
MSG: ' This is the contents of the dynamic slot of the incoming ' ,
}
})
</ Script>
</ HTML>
4. The new name also dynamic slot
What is the dynamic slot name? Is substantially dynamic instruction parameters may also be used in the v-slot, this will involve the new 2.6.0 dynamic parameters
<template v-slot:[attrContent]='msg'>
xxx
</template>
This attrContent will be dynamically evaluated as a JavaScript expression, the value obtained will be used as the final argument. For example, here is default attrContent final result is rendered the v-slot: default = 'msg'.
note:
1) alone may be used in the expression [] brackets, but not the presence of marks and spaces
2) Of course, this method can be a dynamic value, calculating the content attribute data or the data inside. It is important this dynamic value is a reference to the component scope. Simply put, it is the scope of the parent assembly.
For example, the top v-slot: sayWhat = 'thing' can be written as:
1) v-slot: [first + sec] = 'thing' attention not include spaces on both sides plus
2） v-slot:[attr]='thing'
3） v-slot:[attrs]='thing'
4） v-slot:[getattr()]='thing'
Export default { Data () { return { MSG: ' This is the contents of the dynamic slot of the incoming ' , attr: ' sayWhat ' , First: ' say ' , sec: ' What ' , } }, Components: slotScope {}, computed: { attrs: function () { return ' sayWhat ' } }, Methods: { getattr () { return 'sayWhat' } } }
Reference: https: //www.cnblogs.com/zjjDaily/p/10518546.html