1、基本用法
//组件
<template>
<div class="com">
<slot name="header"></slot>
<slot>如果没有插槽或者不具名就是显示当前</slot>
<slot name="floot"></slot>
</div>
</template>
<script>
export default {
}
</script>
//使用
<template>
<div id="app">
<com>
<div class="header" slot="header">
我将会插入到名为header的插槽当中
</div>
<div class="floot" slot="floot">
我将会插入到名为floot的插槽当中
</div>
</com>
</div>
</template>
<script>
import com from '@/components/com.vue';
export default {
name:"App",
components:{
com
}
}
</script>
2、插槽中使用data
//组件
<template>
<div class="com">
<slot name="header" :slotData="comData"></slot>//slotData表示插槽key值
<slot>如果没有插槽或者不具名就是显示当前</slot>
<slot name="floot" :slotData="comData"></slot>
</div>
</template>
<script>
export default {
data() {
return {
comData:{
header:"我将会插入到名为header的插槽当中",
floot:"我将会插入到名为floot的插槽当中"
}
}
},
}
</script>
//使用
<template>
<div id="app">
<com>
<template v-slot:header="{slotData}">
//必须使用template包裹，v-slot后面跟着的是插槽名，slotData插槽里表示的key值
<div class="header">
{{slotData.header}}
</div>
</template>
<template v-slot:floot="{slotData}">
<div class="floot">
{{slotData.floot}}
</div>
</template>
</com>
</div>
</template>
<script>
import com from '@/components/com.vue';
export default {
name:"App",
components:{
com
}
}
</script>
3、动态插槽
//组件
<template>
<div class="com">
<slot name="header" :slotData="comData"></slot>
<slot name="body" :slotData="comData"></slot>
<slot name="floot"></slot>
</div>
</template>
<script>
export default {
data() {
return {
comData:{
header:"我将会插入到名为header的插槽当中",
body:"我将会插入到名为body的插槽当中"
}
}
},
}
</script>
//使用
<template>
<div id="app">
<com>
<template v-slot:[slotName]="{slotData}">
<div class="slot">
{{slotData[slotName]}}
</div>
</template>
<div class="floot" slot="floot">
<button @click="changeSlotName">改变动态插槽</button>
</div>
</com>
</div>
</template>
<script>
import com from '@/components/com.vue';
export default {
name:"App",
components:{
com
},
data(){
return{
slotName:"header"
}
},
methods: {
changeSlotName(){
this.slotName = this.slotName === "header" ? "body" : "header";
}
}
}
</script>
