<template>
<div >
<my-slot>
<template #default>
<h3>content of the default slot</h3>
</template>
<template #firstSlot>
<h3>content of the first slot</h3>
</template>
<template #secondSlot>
<h3>content of the sencond slot</h3>
</template>
<template v-slot:thirdSlot>
<h3>content of the third slot</h3>
</template>
</my-slot>
</div>
</template>
<script>
// eslint-disable-next-line
//import { Lazyload } from 'vant';
//import {Toast} from 'vant';
//import {Notify} from 'vant'
import Vue from 'vue'
Vue.component('my-slot', {
template: `
<div>
<h2>具名插槽示例</h2>
<slot name="firstSlot"></slot>
<slot name="secondSlot"></slot>
<slot name="thirdSlot"></slot>
<slot></slot>
</div>
`
})
export default {
components: {
},
data() {
return {
};
},
mounted() {
},
methods: {
},
};
</script>
<style >
</style>
vue官方文档(18) :具名插槽示例
最新推荐文章于 2024-03-08 16:26:19 发布