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

最新推荐文章于 2024-03-08 16:26:19 发布

amadeus_liu2

最新推荐文章于 2024-03-08 16:26:19 发布

阅读量365

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/amadeus_liu2/article/details/127628464

版权

Vue 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

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