slot简单的说就是父组件想在要往子组件里面插入一点内容
slot分为三种:基本使用、作用域插槽、具名插槽
基本使用:
<!-- 父组件 -->
<template>
<div>
<!-- 子组件 -->
<SlotDemo :url="website.url">
{{website.title}}
</SlotDemo>
</div>
</templte>
<script>
import SlotDemo from "./SlotDemo";
export default {
components:{
SlotDemo
},
data(){
return{
name:"哈哈",
website:{
url:"www.baidu.com",
title:'0v0',
subTitle:"程序员的梦工厂"
}
}
}
}
</script>
<!-- 子组件 -->
<template>
<a :href="url">
<slot>
默认内容,父组件没有设置内容的时候,这里显示
</slot>
</a>
</templte>
<script>
export default {
props:['url'], //这是属性的一个简写
data(){
return{
}
}
}
</script>
作用域插槽:
<!-- 父组件 -->
<template>
<div>
<!-- 子组件 -->
<ScopedSlotDemo :url="website.url">
<!--slotProps这个名字是可以自己定义的-->
<template v-slot="slotProps">
{{slotProps.slotData.title }}
</template>
</ScopedSlotDemo>
</div>
</templte>
<script>
import ScopedSlotDemo from "./SlotDemo";
export default {
components:{
ScopedSlotDemo
},
data(){
return{
name:"哈哈",
website:{
url:"www.baidu.com",
title:'0v0',
subTitle:"程序员的梦工厂"
}
}
}
}
</script>
<!-- 子组件 -->
<template>
<!--slotData这个名字是可以自己定义的-->
<a :slotData="website">
<slot>
默认内容,父组件没有设置内容的时候,这里显示
</slot>
</a>
</templte>
<script>
export default {
props:['url'], //这是属性的一个简写
data(){
return{
website:{
url:"www.zizujian.com",
title:'mom',
subTitle:"子组件website"
}
}
}
}
</script>
具名插槽:
<!-- 父组件 -->
<NamedSlot>
<!-- 缩写的话就是 <template #header> -->
<template v-slot:header>
<h1>请插入 header slot 中</h1>
</template>
<p>将插入到main slot 中,即未命名的 slot</p>
<template v-slot:footer>
<h1>请插入 footer slot 中</h1>
</template>
</NamedSlot>
<!-- NamedSlot组件 -->
<div class="container">
<header>
<slot name="header"></slot>
</header>
<mian>
<slot></slot>
</mian>
<footer>
<slot name="footer"></slot>
</footer>
</div>