Vue 2.6 slot update v-slot usage summary
In 2.6.0, we introduced a new unified syntax (ie v-slot instruction) for named slots and scoped slots. It replaces slot and slot-scope, which are currently deprecated but not removed and are still in the documentation.
Slots
My understanding is that the
parent page inserts any content in the component label, and the sub-component inserts slot to control the placement
(anonymous slot, named slot)
Slot classification There
are three categories of
slots: 1. Anonymous slot (also called default slot): no name, there is one and only one
2. Named slot: relatively anonymous slot component slot label named with name
3. Function Domain slot: The data in the child component can be obtained by the parent page (resolved that the data can only be passed from the parent page to the child component)
Anonymous slot (also called the default slot default)
usage: As I understand it, only one anonymous slot is needed. (That's it, not too complicated)
Parent page:
<todo-list>
<template v-slot:default>
任意内容
<p>我是匿名插槽 </p>
</template>
</todo-list>
//v-slot:default is more unified with the named writing, easy to understand, and you don’t need to write
subcomponent todoList.vue
<slot>我是默认值</slot>
##展示##
// Any content
// I am an anonymous slot
named slot (name)
Usage: My understanding, compared with anonymous slot, it must be named todo corresponding, there can be multiple named slots. (No ~)
Parent page
<todo-list>
<template v-slot:todo>
任意内容
<p>我是匿名插槽 </p>
</template>
</todo-list>
// todo
data() {
return {
dynamicSlotName:"todo"
}
},
Subassembly
<slot name="todo">我是默认值</slot>
##展示##
// Any content
// I am an anonymous slot
Operation on v-slot:todo:
Dynamic naming
v-slot:(dynamicSlotName)//replace the
abbreviation of v-slot:todo named slot on the label (anonymous slot usage) (you can see later)
#todo replace v-slot:todo
anonymous if you want to use it, you must add it On default
#default Replacement tag v-slot:todo
All content in the parent template is compiled in the parent scope; all content in the child template is compiled in the child scope.
Scope slot
1. The key point is that slotProps accesses sub-components: user="user": test="test" and similar attribute data
Parent page
<todo-list>
<template v-slot:todo="slotProps" >
{
{slotProps.user.firstName}}
</template>
</todo-list>
//slotProps 可以随意命名
//slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"
子组件
<slot name="todo" :user="user" :test="test">
{
{ user.lastName }}
</slot>
data() {
return {
user:{
lastName:"Zhang",
firstName:"yue"
},
test:[1,2,3,4]
}
},
// {
{ user.lastName }}是默认数据 v-slot:todo 当父页面没有(="slotProps")
// 时显示 Zhang
display
// yue
deconstructs the slot Prop
parent page (the child component remains the same)
// 相当于
function (slotProps) {
// 插槽内容
}
(slotProps)=>参数可以用slot标签上现有的值({user,test})替换
<todo-list>
<template v-slot:todo="{user,test}
" >
{
{user.firstName}}
</template>
</todo-list>
display
Replace the name of the parameter value (see later)
<todo-list>
<template v-slot:todo="{user:person,test}
" >
{
{person.firstName}}
</template>
</todo-list>
// v-slot:[dynamicSlotName]="{user:person,test}
display
Exclusive default slot abbreviation (you can see later) I
feel that there is no opportunity to use it, and there are too many restrictions
Summary
After using v-slot, you only need to consider
1. Whether it needs to be named (anonymous slot, named slot)
2. Whether the parent page needs to fetch the data that exists in the child page (scope slot)
todo-list example,
you can try it for easy understanding~
parent page
<template>
<div>
新插槽 v-slot 代替具名插槽 作用于插槽
<todo-list
>
<template #todo="{todos:list}">
<div @click = type(todos.id)>
{
{list.text}}
</div>
</template>
</todo-list>
</div >
</template>
<script>
import todoList from "@/components/component/slotTodoChildren";
export default {
name:"vSlot",
components:{
todoList
},
data() {
return {
}
},
methods: {
type(data){
console.log(data)
}
},
}
</script>
Subassembly
<template>
<ul class="slotTodoChildren">
<li class="lis"
v-for="todo in todoList"
v-bind:key="todo.id"
>
<!--
我们为每个 todo 准备了一个插槽，
将 `todo(todoList里的)` 对象作为一个插槽的 prop 传入。
-->
<slot name="todo" :todos="todo">
<!-- 后备内容 -->
{
{ todo.text }}
</slot>
</li>
</ul>
</template>
<script>
export default {
name:"slotChildren",
data() {
return {
todoList:[
{
id:1,
text:"扫地"
},
{
id:2,
text:"做饭"
},
{
id:3,
text:"擦桌子"
}
]
}
},
created(){
console.log(this.filteredTodos)
}
}
</script>
<style scoped>
.slotTodoChildren .lis{
display: block;
background: #434534;
line-height:40px;
margin-top: 10px;
color: #fff;
font-size: 24px;
height: 40px;
}
</style>