说明
本文用示例说明Vue的插槽（v-slot）的用法。包括：普通插槽，作用域插槽等。
官网
插槽 — Vue.js
说明
vue 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)，它取代了 slot 和 slot-scope，这两个在vue2.6.x中已被废弃但未被移除。vue 3 中， slot 和 slot-scope会被直接移除。
具名插槽
父组件：<template v-slot:name1> //简写方式：<template #name1="data1">
子组件：对应：<slot name='name1'><slot>
无名插槽
父组件所有不带插槽名字的<template>或者不在<template>中的内容，都会被放到子组件默认插槽中：<slot></slot>。
实际上，这两种都会带有隐含的名字：default
slot与v-slot区别
具名作用域插槽写法
父组件：<template v-slot:name1="data1"> //简写方式：<template #name1="data1">
子组件：对应：<slot name='name1' :data2="childData"><slot>
prop名字问题
在使用时，父组件的取值的名字必须与子组件返回的相同，如下图加粗部分所示：
父组件：<template #test="data1"> {{data1.data2}} </template>
子组件：<slot name=“test” :data2=“testData”></slot>
说明：父组件的data1里边包含的就是这样的数据：{"data2": testData绑定的对象}，所以通过data1已经可以获取到数据了。
默认作用域插槽写法
默认插槽 可以写成 v-slot='xxx'。也就是：<template v-slot:default="xxx">
注意：<template #="xxx"> 这样写是不对的，#之后必须带参数。
作用域解构插槽
父组件：<template v-slot="{data2}"> //这个名字（prop）必须对应下方加粗部分的名字
子组件：对应：<slot name='name1' :data2="childData"><slot>
说明：
- 可以对父组件prop重命名：<template v-slot="{data2 : person}">
- 可以设置默认内容：<template v-slot="{data2 : {name: "Tony"}}">
- 以上边为例，获取的data2是childData对应的对象。
支持动态插槽名
<template v-slot:[dynamicSlotName]>
slot与v-slot区别
router/index.js
components/ComponentA.vue（父组件）
components/ComponentB.vue（子组件）
测试
访问：http://localhost:8080/#/component-a
router/index.js
components/ComponentA.vue（父组件）
components/ComponentB.vue（子组件）
测试
访问：http://localhost:8080/#/component-a
简介
本处在子组件中有要做的事情（包括已完成的和未完成的），然后父组件对其进行显示，如果已经完成，就在前边打个“√”。
router/index.js
components/ComponentA.vue（父组件）
components/ComponentB.vue（子组件）
测试
访问：http://localhost:8080/#/component-a
深入了解组件 - 插槽 - 《Vue.js v2.x 官方教程》 - 书栈网 · BookStack
Vue 2.6+ 你需要知道的 v-slot - 简书
vue作用域插槽，你真的懂了吗？
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/42512.html