Open PaulChess opened 3 years ago
当你想在一个插槽中使用数据时,例如:
// ✅
<todo-button>
Delete a {{ item.name }}
</todo-button>
该插槽可以访问与当前模板其余部分相同的实例property, 即相同的作用域
但是插槽不能访问子组件<todo-button></todo-button>
的作用域,例如:
// ❌
<todo-button action="delete">
Clicking here will {{ action }} an item
<!-- `action` 未被定义,因为它的内容是传递*到* <todo-button>,而不是*在* <todo-button>里定义的。 -->
</todo-button>
父模板的所有内容都是在父级作用域中编译的,子模板中的所有内容都是在子作用域内编译
有时候我们的组件里需要多个插槽,此时具名插槽可以帮我们将内容精准地分发到指定的位置
slot
元素有一个特殊的attribute: name
, 可以用来定义额外的插槽。一个不带name
的<slot>
出口会带有隐含的name -> default
例如这里有一个<base-layout>
组件:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
使用:
v-slot:name
, 注意: v-slot
只能添加在<template>
上
// Parent.vue
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<template v-slot:default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
特殊情况
当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用,我们就可以把v-slot
直接用在组件上。
<todo-list v-slot:default="slotProps">
<i class="fas fa-check"></i>
<span class="green">{{ slotProps.item }}</span>
</todo-list>
更简化写法:
<todo-list v-slot="slotProps">
<i class="fas fa-check"></i>
<span class="green">{{ slotProps.item }}</span>
</todo-list>
常规组件
自定义模板(即内容分发),就要用到slot, 但是slot只能是固定的模板,没办法自定义循环体中的一个具体的项
作用域插槽 常规的slot无法实现对组件循环体的每一项内容进行不同的内容分发。slot-scope本质上和slot一样,只不过可以传递参数。如下:
在slot上,传递了一个自定义的参数
book
, 它的值绑定时当前循环项的数据book,这样在父级使用时,就可以在slot中访问它了。绑定在元素上的attribute被称为
插槽prop
。在父级作用域中,我们可以使用带值的v-slot
来定义我们提供的插槽prop的名字。