前端学习笔记Vue篇（3）

1.slot插槽内容分发

在vue项目开发过程中经常遇到这样的情况：很多组件或者模块的结构相同，只不过是部分内容稍有不同。这种情况下，每次编写相似的代码不仅会增大工作量，还会让代码变得臃肿和冗余。

slot便是一种用来解决这种情况的简洁方案，话不多说，上代码

父组件：test-slot.vue

<template>
  <div class="test-slot">
      <slot-children>
        <div slot="header">
          替换了name="header"的slot
        </div>
        <div>
          替换没有name的slot（在未具名的slot只有一个时才能替换）
        </div>
      </slot-children>
  </div>
</template>

<script>
import SlotChildren from '@/components/slot-children'
export default {
  data () {
    return {
    }
  },
  components: {
    SlotChildren
  }
}

</script>
<style lang="less" scoped>
</style>

子组件：slot-children.vue

<template>
  <div class="slot-children">
      <div>这是通用的内容，不会被替换</div>
      <slot name="header">这句话不显示，会被父组件name相同的内容替换</slot>
      <slot>这句话不显示，会被父组件没有指定name的内容替换</slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}

</script>
<style lang="less" scoped>
</style>

这里的子组件即相似的组件，里面需要被替换的内容使用slot标签包裹，在父组件中不同的调用可以插入不同的内容；

父组件可以使用slot属性指定替换的子组件中相应的slot