Appearance
插槽
本节目标:理解“插槽”的核心思路,并能把它用于实际开发或面试表达。 ==在==
2.6.0==中,我们为具名插槽和作用域插槽引入了一个新的统一的语法==(==即==v-slot==指令==)==。== ==它取代了==slot==和==slot-scope==这两个目前已被废弃但未被移除且仍在====文档中====的==attribute==。== ==新语法的由来可查阅这份==
RFC==。==
Vue ==实现了一套内容分发的== API==,这套== API ==的设计灵感源自==
Web Components==规范草案====,将== \<slot\> ==元素作为承载分发内容的出口。==
- ==我们在定义组件时,可以在==
template==中使用==\<slot\>\</slot\>==来接受一块内容;== - ==这些一块块的内容,我们在组件使用时进行传递;==
- ==默认情况下,组件开始和结束标签之间的所有内容,会传给组件内部的默认插槽;==
- ==如果我们在组件内部定义了多个插槽,则在使用时,必须通过==
\<template\>==标签和插槽名称来给组件内部相应的插槽传递内容,如:==
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>- ==模板中的==
\<slot\>\</slot\>==是用来接受插槽内容的。== - ==插槽可以使用==
name==属性来接受==v-slot==中传过来相应名称插槽的内容;==
