vue slot 插槽

1 普通插槽使用

<template>
    <div>
        <slot>默认值</slot>
    </div>
</template>

2 具名插槽 使用 给 slot 添加 name

<template>
    <div>
        <slot name="box">默认值</slot>
    </div>
</template>

通过 v-slot 与 slot 进行调用具名插槽

v-slot

<template>
  <div>
    <template v-slot:top></template>
    </div>
</template>

slot 已经废弃了

<template>
  <div>
    <template slot="top"></template>
    // slot 和 v-slot 的区别，slot 全部标签都可以使用 slot，而 v-slot 只能使用 template 
    <div slot="top"></div>
    </div>
</template>

3 作用域插槽

通过 row 向外 传递参数

<template>
    <div class="two">
        <div class="two-item">
            <slot :row="obj">top</slot>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            obj : {
                name : '1000'
            }
        }
    }
};
</script>

单个插槽传参

使用 v-slot

<template>
  <div>
    <two>
      // 所传递的参数在 .row 中
      <template v-slot="top">{{top.row.name}}</template>
    </two>
  </div>
</template>

使用 slot-scope

<template>
  <div>
    <two>
      <template slot-scope="top">{{top.row.name}}</template>
    </two>
  </div>
</template>

多个插槽进行传参

v-slot

也可以使用 # 简写

<template>
  <div>
    <two>
    <!-- v-slot:插槽名="使用row传递的值" -->
      <template v-slot:top="top">{{top.row.name}}</template>
    </two>
  </div>
</template>