Vue2插槽的简单使用示例

插槽-slot

1. 基本使用
2. 作用域插槽
3. 具名插槽

1. 基本使用

比较简单, 比如:

<template>

        <a :href=”url”>

                <slot :slotData=”website”>xxxx</slot>

        </a>

</template>

父页面使用--不用获取slotdemo组件里面的数据的时候:

<slotDemo :url="xxx”>

        xxxxx

</slotDemo>

2. 作用域插槽

1) scope 只可以用于 <template> 元素，其它和 slot-scope 都相同（已被移除）。
2) slot-scope 用于将元素或组件表示为作用域插槽，可以接收传递给插槽的 prop 。（在 2.5.0+ 中替代了 scope，自 2.6.0 起被废弃）
3) 推荐使用v-slot，默认插槽只传递参数v-slot="xxx"

3. 具名插槽

1) 用于 <template> 元素, v-slot:名字="xxx"

2) 或者#名字

使用示例:

子页面:

<template>
  <div>
    <header>
      <slot name="header">具名插槽-header</slot>
    </header>
    <main>
      <slot :slotData="slotData">
        作用域插槽 :slotData="slotData"方便父页面获取插槽数据
      </slot>
    </main>
    <footer>
      <slot name="footer">具名插槽-footer</slot>
    </footer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      slotData: {
        title: 'title-aaa'
      }
    }
  }
}
</script>

父页面:

<template>
  <div class="a-box">
    <NameSlot>
      <!-- 具名插槽 -->
      <template v-slot:header>
        <div>头部---</div>
      </template>
      <!--  作用域插槽: 方便获取插槽的数据 -->
      <template v-slot="slotProps">
        <div>{{ slotProps.slotData.title }}</div>
      </template>
      <!-- 具名插槽 -->
      <template #footer>
        <div>底部----</div>
      </template>
    </NameSlot>
  </div>
</template>

<script>
import NameSlot from './Slot1'

export default {
  components: {
    NameSlot
  }
}
</script>

<style lang="css" scoped>
.a-box {
  width: 300px;
  height: 300px;
  background-color: red;
  font-size: 33px;
}
</style>