插槽
-
编译作用域
父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。
插槽可以访问该组件中的变量,而不能访问父模板中的变量 -
后备内容(它只会在没有提供内容的时候被渲染)
将它放在 标签内 -
具名插槽
格式:
ps: 一个不带 name 的 出口会带有隐含的名字“default”
使用:在向具名插槽提供内容的时候,我们可以在一个 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称<!-- <base-layout> 组件 --> <div class="container"> <header> <slot name="header"></slot> <!-- 具名插槽 --> </header> </div> <base-layout> <template v-slot:header> <h1>Here might be a page title</h1> </template> </base-layout>
-
作用域插槽
<!-- current-user组件 --> <span> <slot :user="user"> <!-- 绑定在 <slot> 元素上的 attribute 被称为插槽 prop --> { {user.lastName}} <!--后备内容 --> </slot> </span> <!-- 使用 --> <current-user> <template v-slot:default="user"> { {user.user.firstName}} <!--这里注意第一个user是自己重命名的,第二个user是插槽prop的名称--> </template> </current-user>
-
独占默认插槽的缩写语法
<!-- current-user --> <span> <slot :user="user"></slot> </span> <!-- 默认作用域插槽可以缩写为以下形式 --> <current-user v-slot="slotProps"> { {slotProps.user.firstName}} </current-user>
注意:只要出现多个插槽,请始终为所有的插槽使用完整的基于 的语法
-
解构插槽Prop
<current-user v-slot="{ user }"> { { user.firstName }} </current-user> <!-- 可以定义后备内容 --> <current-user v-slot="{ user = { firstName: 'Guest' } }"> <!-- 赋予默认值 --> { { user.firstName }} </current-user>
-
具名插槽的缩写
v-slot:header 可以缩写为 #header
v-slot=“user” 可以缩写为 #default="{ user }"