插槽在vue2.6.0开始有了新的更新
子组件（定义插槽）这里版本前后没什么变化
<template> <div> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> </template> <script> export default { name: "BaseLayout" } </script>
父组件（使用）这里版本后废弃了slot="header"这样的写法，在vue3.0后直接移除。取而代之的是v-slot:插槽名称的写法，默认插槽（没有名字，默认为default），缩写为#header
<template> <base-layout> <template v-slot:header> <h1>Header</h1> </template> <template v-slot:default> <p>Main</p> </template> <template v-slot:footer> <p>Footer</p> </template> </base-layout> </template> <script> import BaseLayout from "../components/BaseLayout"; export default { components: {BaseLayout} } </script>
使用缩写#的代码
<template> <base-layout> <template #header> <h1>Header</h1> </template> <template #default> <p>Main</p> </template> <template #footer> <p>Footer</p> </template> </base-layout> </template> <script> import BaseLayout from "../components/BaseLayout"; export default { components: {BaseLayout} } </script>
页面
子组件（定义了数据并且将数据绑定到特定属性[user]上）
<template> <div> <header> <slot name="header"></slot> </header> <main> <!--绑定在 <slot> 元素上的特性被称为插槽 prop--> <slot :user="userData"> {{userData.lastName}} </slot> </main> <footer> <slot name="footer"></slot> </footer> </div> </template> <script> export default { name: "BaseLayout", data: () => ({ userData: { firstName: ‘AAA‘, lastName: ‘Miss‘ } }) } </script>
父组件（给 v-slot 带一个值来定义我们提供的插槽 prop 的名字[slotProps]）
<template> <base-layout> <template #header> <h1>Header</h1> </template> <!--slotProps可以使任意名字--> <template #default="slotProps"> <strong style="color: crimson">{{slotProps.user.firstName}}</strong> </template> <template #footer> <p>Footer</p> </template> </base-layout> </template> <script> import BaseLayout from "../components/BaseLayout"; export default { components: {BaseLayout} } </script>
数据关系：
页面：
以上代码的意思是，本来这里的后备内容是显示lastName的，我们可以在父组件那里做手脚，让后备内容显示的是firstName。但是无论怎么做，数据都是来自子组件。
将父组件的指定的后备内容注释掉即可显示原生的内容，如下：
页面：
对于默认插槽，我们可以变成更加简洁的写法：
<template v-slot:default="slotProps"> <strong style="color: crimson">{{slotProps.user.firstName}}</strong> </template>
变成（不带参数的 v-slot 被假定对应默认插槽）
<template v-slot="slotProps"> <strong style="color: crimson">{{slotProps.user.firstName}}</strong> </template>
对于缩写 #，有限制条件，那就是只能有参数名的情况下才能使用，即：#header=“”。而不带的话会报错，即：#=“”
原文：https://www.cnblogs.com/LUA123/p/10812164.html