Vue3插槽的使用

最近在做Vue3的项目，与Vue2还是有一定的区别的，首先是插槽。

与 vue2 不同，原来的 slot 属性可以定义在任何元素上，现在 v-slot 只能是 template 元素上。

总结一点：v-slot:换成了#

1.跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:title可以被重写为 #title:，无具名插槽的用#default

2.作用域插槽slot-scope="props"换成了#default="props"

其实就是用  #name 来使用，没有name就用 #default

默认插槽：简写成#default
具名插槽：例如v-slot:title可以简写成#title

 示例

1.具名插槽的使用

1.定义一个具名插槽

    <div class="list_box_content">
      <slot name="box-content"></slot>
    </div>

2.使用插槽

    <listBox :title="'执行趋势图'">
      <template #box-content>
        <dynamic :height="'350px'"></dynamic>
      </template>
    </listBox>

 2.作用域插槽的使用

      <el-table-column label="定时状态" align="center">
        <template #default="props">
          <span v-if="props.row.scheduleReleaseState === 'OFFLINE'">下线</span>
          <span v-if="props.row.scheduleReleaseState === 'ONLINE'">上线</span>
          <span v-if="!props.row.scheduleReleaseState">-</span>
        </template>
      </el-table-column>