在vue v2.6.0中,新引入了v-slot指令,他取代了slot和slot-scope这两个目前已经被废弃但是为被移除的特性。
使用
// 根组件
<template>
<div>
<mo>
<template v-slot:header="slotProps">
<h1>{{slotProps.header + ' ' + msg}}</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>
</mo>
</div>
</template>
<script>
import mo from './module.vue'
export default {
components: {
mo
},
data() {
return {
msg: '这是根组件的消息'
}
}
}
</script>
// 子组件
<template>
<div>
--header start--
<header>
<slot name="header" :header="header"></slot>
</header>
--header over--
<div></div>
--default start--
<slot></slot>
--default over--
<div></div>
--footer start--
<footer>
<slot name="footer"></slot>
</footer>
--dooter over--
</div>
</template>
<script>
export default {
data() {
return {
header: '来自子组件的头部消息'
}
}
}
</script>
<style scoped>
</style>
- 组件中可以使用template标签,加v-slot指令制定具名插槽,当没有指定插槽name时,默认出口会带有隐含的名字“default”。
- 根组件可以利用v-slot:header="slotProps"接受组件中的消息,组件中只需要在<slot name="header" :header="header"></slot>就可以了
- 如果被提供的内容只有一个默认插槽时,组件的标签可以直接被当做插槽的模板来使用<mo v-slot="slotProps">
- 动态参数也可是使用到插槽当中<mo v-slot=[dynamicSlotName]>
- v-slot的缩写是#,但是如果使用#的话,必须始终使用具插槽来代替
<mo #default="slotProps">