Vue---插槽

5.v-slot:

 插槽, 具名插槽 slot,

slot-scope过时了 2.6.0使用v-slot语法:v-slot:插槽名

语法糖:#插槽名

  设计组件里面:

    默认槽位:< slot> < /slot>

    具名槽位:< slot name="s1"> < /slot>  < slot name="s2"> < /slot>

  使用组件时:

     < 组件名> 尖括号中的东西插入默认槽位 < /组件名>

     < 组件名>

             < template v-slot:s2>插入东西必须放这个标签中,老版本不用< template>

             < template #s1>插入东西必须放这个标签中,老版本不用< template>

    < /组件名>

   

    总结: v-slot:s2 是具名插槽的用法  #s1是插槽的语法糖

举例：

App.vue文件

<template>

  <div class="mainbox">

    <tbos>

      <b>插槽数据</b>

    </tbos>

   

  </div>

</template>

<script>

import tbos from "./components/tbos.vue"

export default {

  data(){

    return{

    }

  },

  components:{

    tbos

}

}

</script>

<style>

.mainbox{

  width: 300px;

  height: 300px;

  border: 1px solid black;

  margin: 0 auto;

}

</style>

tbos.vue文件

<template>

   <div class="tbos">

    <slot></slot>

    <p>上面是插槽数据</p>

    <p>内容</p>

   </div>

</template>

<style>

    .tbos{

        width: 300px;

        height: 200px;

        background-color: aqua;

    }

</style>

没有指定插槽名就是默认插入到插槽,不给插槽插入数据的话,就会使用组件的slot中的数据插槽名不用使用引号引起来,直接写变量名

具名插槽：

插入的内容必须是template标签或者组件 不能是原生的元素

举例：

App.vue文件

<template>

  <div class="mainbox">

    <tbos>

      <p>插槽数据</p>

      <template v-slot:s2>

        <p>name值为s2的插槽值</p>

      </template>

      <template v-slot:s1>

        <b>name值为s1的插槽值</b>

      </template>

    </tbos>

   

  </div>

</template>

<script>

import tbos from "./components/tbos.vue"

export default {

  data(){

    return{

   

    }

  },

  components:{

    tbos

}

}

</script>

<style>

.mainbox{

  width: 300px;

  height: 300px;

  border: 1px solid black;

  margin: 0 auto;

}

</style>

 

tbos.vue文件

<template>

   <div class="tbos">

    <slot name="s2"></slot>

    <slot></slot>

    <slot name="s1"></slot>  

    <p>上面是插槽数据</p>

    <p>内容</p>

   </div>

   

</template>

<style>

    .tbos{

        width: 300px;

        height: 200px;

        background-color: aqua;

    }

</style>