vue中slot插槽的使用
1.看看官网怎么说？
在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和
slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。
Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。
2.分为哪几种？
2.1默认插槽
木有name的就是默认插槽，捕获所有未被匹配的内容。
<slot>这是默认的slot</slot>
定义一个子组件
Vue.component("test1", {
template: `<div>
Hello,苏苏!
<slot>这是默认的slot</slot>
</div>`,
});
父组件中
<test1></test1>
此时的结果是：
Hello,苏苏!这是默认的slot
<test1>这是苏苏来了</test1>
此时的结果是：
Hello,苏苏!这是苏苏来了
当插槽有默认值的时候，重新定义的内容将会覆盖默认内容，反之显示默认内容。
2.2具名插槽
有时我们需要多个插槽， 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽，一个不带 name 的 出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称，（原语法为slot=“定义的名称”）
定义一个子组件
Vue.component("test1", {
template: `<div>
Hello,苏苏!
<slot name="name" ></slot>
<slot name="age"></slot>
<slot >这是默认的slot</slot>
</div>`,
});
父组件
<test1 style="margin: 20px"
>eg：具名插槽的使用 <template slot="name">苏苏小苏苏111</template
><template slot="age">18岁</template></test1>
输入内容：
Hello,苏苏!苏苏小苏苏11118岁eg：具名插槽的使用
2.3作用域插槽
有时让插槽内容能够访问子组件中才有的数据是很有用的，绑定在 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字。
定义一个子组件
Vue.component("test1", {
template: `<div>
Hello,苏苏!
<slot name="name" play="玩游戏"></slot>
<slot name="age"></slot>
<slot play="玩耍">这是默认的slot</slot>
<slot say="说哈">这是默认的slot</slot>
</div>`,
});
父组件：
<test1 style="margin: 20px"
>eg：作用域插槽使用
<template slot="name" slot-scope="play">Suunto{{ play }}</template></test1
>
输出：
Hello,苏苏! Suunto{ “play”: “玩游戏” } eg：作用域插槽使用 eg：作用域插槽使用
父组件：
<test1 style="margin: 20px"
>eg：作用域插槽使用
<template slot="name" slot-scope="{play}">Suunto{{ play }}</template></test1
>
输出：
Hello,苏苏! Suunto玩游戏 eg：作用域插槽使用 eg：作用域插槽使用
3.v-slot的使用
在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope
注意 v-slot 只能添加在 template 上 (或者独占默认插槽的缩写语法)，这一点和已经废弃的 slot attribute 不同。
<test1 style="margin: 20px">
<template v-slot:name>这是v-slot使用的具名插槽</template></test1
>
<test1 style="margin: 20px">
<template v-slot:default="{ play }"
>这是v-slot使用的作用域插槽 {{ play }}</template
></test1
>
<test1 style="margin: 20px" v-slot:default="{ play }">
独占默认插槽的缩写语法：当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用---{{ play}}
</test1>
注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确，只要出现多个插槽，请始终为所有的插槽使用完整的基于template 的语法
4. 解构插槽 Prop
定义一个子组件
Vue.component("test2", {
props: ["lists"],
template: `
<div>
<ul>
<li v-for="item in lists">
<slot :item="item"></slot>
</li>
</ul>
</div>
`,
});
父组件
<test2 :lists="list" style="margin: 20px">
<template v-slot="{ item }"> 解构： {{ item }} </template>
</test2>
输出：
解构： { “name”: “苏苏1” }
解构： { “name”: “苏苏2” }
解构： { “name”: “苏苏3” }
解构： { “name”: “苏苏4” }
父组件：重命名
<test2 :lists="list" style="margin: 20px">
<template v-slot="{ item: user }"> 重命名： {{ user.name }} </template>
</test2>
输出：
重命名： 苏苏1
重命名： 苏苏2
重命名： 苏苏3
重命名： 苏苏4
父组件：定义后备内容，用于插槽 prop 是 undefined 的情形
<test2 :lists="list" style="margin: 20px">
<template v-slot="{ item = { name: '2332' } }">
定义后备内容，用于插槽 prop 是 undefined 的情形： {{ item.name }}
</template>
</test2>
5.动态插槽名
动态指令参数也可以用在 v-slot 上，来定义动态的插槽名
<test1 style="margin: 20px">
<template v-slot:[dynamicSlotName]> 动态插槽名--sss </template>
</test1>
...
dynamicSlotName: "name",
输出：
Hello,苏苏! 动态插槽名--sss 这是默认的slot 这是默认的slot
6.具名插槽的缩写
具名插槽的缩写,跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header,然而，和其它指令一样，该缩写只在其有参数的时候才可用，你希望使用缩写的话，你必须始终以明确插槽名取而代之，以#default=开始
7.完整代码
<template>
<div class="contentBox">
<List>
<ListItem>
<ListItemMeta
:avatar="src"
title="什么是插槽"
description="插槽就是Vue实现的一套内容分发的API，将 元素上的 attribute 被称为插槽 prop
Vue.component("test2", {
props: ["lists"],
template: `
<div>
<ul>
<li v-for="item in lists">
<slot :item="item"></slot>
</li>
</ul>
</div>
`,
});
export default {
data() {
return {
dynamicSlotName: "name",
src: require("@/assets/img/susu.jpg"),
list: [
{
name: "苏苏1",
},
{
name: "苏苏2",
},
{
name: "苏苏3",
},
{
name: "苏苏4",
},
],
};
},
};
</script>
<style>
</style>