0
点赞
收藏
分享

微信扫一扫

vue官方文档(18) :具名插槽示例


<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>


举报

相关推荐

0 条评论