【Vue.js】之插槽slot

插槽Slot是Vue提出来的一个概念，正如名字一样，插槽用于决定所携带的内容，插入到指定的某个位置，从而使模板分块，因而具有模块化的特质和更大的重用性。

将元素作为承载分发内容的出口。可以理解为模板中的占位符，在实例化是用自定义标签替代

• 基本使用
• 作用域插槽
• 具名插槽

1.Index.vue

<template>
  <div>
      <p>vue高级特性</p>
      <hr>
      <!-- slot -->
      <Slot :url="website.url">
          {{website.title}}
      </Slot>
  </div>
</template>

<script>
import CustomVModel from './VModel'
import Slot from './Slot'
export default {
  components: {
    Slot
  },
  data () {
    return {
      name: '夹心',
      website: {
        url: 'http://imooc.com/',
        title: 'imooc',
        subTitle: '程序员的梦工厂'
      }
    }
  }
}
</script>

<style>

</style>

Slot.vue

<template>
  <a :href="url">
      <slot>
        默认内容, 即父组件没有设置内容时,这里显示
      </slot>
  </a>
</template>

<script>
export default {
  props: ['url'],
  data () {
    return {}
  }
}
</script>

<style>

</style>

作用域插槽

<template>
  <div>
      <p>vue高级特性</p>
      <hr>
      <!-- scoped slots -->
      <ScopedSlots :url = "website.url">
          <template v-slot = "slotProps">
              {{slotProps.slotData.title}}
          </template>
      </ScopedSlots>
  </div>
</template>

<script>
import ScopedSlots from './ScopedSlot'
export default {
  components: {
    ScopedSlots
  },
  data () {
    return {
      name: '夹心',
      website: {
        url: 'http://imooc.com/',
        title: 'imooc',
        subTitle: '程序员的梦工厂'
      }
    }
  }
}
</script>

<style>

</style>

ScopedSlot.vue

<template>
  <a :href="url">
      <slot :slotData = "website">
        {{website.subTitle}}
      </slot>
  </a>
</template>

<script>
export default {
  props: ['url'],
  data () {
    return {
      website: {
        url: 'http://wangEditor.com/',
        title: 'wangEditor',
        subTitle: '轻量级富文本编辑器'
      }
    }
  }
}
</script>

<style>

</style>

具名插槽

Index.vue

<!-- NamedSlot -->
      <NamedSlot>
        <template v-slot:header>
            <h1>将插入 header slot 中</h1>
        </template>
        <p>将插入main slot中, 即未命名的slot</p>
        <template v-slot:footer>
            <h1>将插入 footer slot 中</h1>
        </template>
      </NamedSlot>

NamedSlot.vue

<template>
 <div class="container">
   <header>
     <slot name = "header"></slot>
   </header>
   <main>
     <slot></slot>
   </main>
   <footer>
     <slot name = "footer"></slot>
   </footer>
 </div>
</template>