vue slot插槽

 

slot:插槽，官方示例地址：https://cn.vuejs.org/v2/guide/components-slots.html

只有一个插槽时，有默认名称“default”;

当有两个及以上时，对slot进行命名；使用的时候在<template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称

 

定义页面:slotDemo.vue

<template>
    <div>
       <label>slot演示</label><br/>
       <slot></slot><br/>       
       <slot name="first"></slot><br/>
       <label>第二个slot</label><br/>
       <slot name="second"></slot>
    </div>
</template>


<script lang="ts">
import Vue from 'vue';
import Component from "vue-class-component"

/**
 * 模板页面
 */
@Component({})
export default class SlotDemo extends Vue {
  
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

 调用页面:SlotShow.vue

<template>
    <div>
       <u-slot-demo>
           default slot
           <!--一个不带 name 的 <slot> 出口会带有隐含的名字“default”。-->
           <template v-slot:first>
               I am fist-slot
           </template>
           <template slot="second">
               I am second-slot
           </template>
       </u-slot-demo>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from "vue-class-component"
import slotDemo from "./slotDemo.vue";

/**
 * 调用页面
 */
@Component({
    components:
    {
        "u-slot-demo": slotDemo // 组件
    }
})
export default class SlotShow extends Vue {
   
    protected person: any = {FirstName: "qiong"};
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>