Vue slot插槽的基本使用

Slot插槽

插槽，可以实现在组件标签中写内容，然后渲染到组件中。默认情况下是不支持这种操作的，使用slot可以实现

默认slot

Child.vue

<template>
  <div>
    <slot>默认值 如果标签中没写内容，这显示默认内容</slot>

  </div>

</template>
<script>
  export default {

  }
</script>

Parent.vue

<template>
  <div>
    <Child>
      <!-- 这里的内容会被渲染到对应的slot中 -->
      内容
    </Child>

  </div>

</template>
<script>
  import Child from 'Child.vue'
  export default {
    components: {
      Child
    }
  }
</script>

默认slot其实有个name叫 default

具名插槽

在一个组件中可以有多个插槽，插槽在使用的过程中可以去渲染不同的内容。

Child.vue

<template>
  <div>
    <slot>默认值 如果标签中没写内容，这显示默认内容</slot>
    <slot name="name1"></slot>
    <slot name="name2">></slot>
    <slot name="name3">></slot>
  </div>
</template>
<script>
  export default {

  }
</script>

<template>
  <div>
    <Child>
      <!-- 被渲染到没有名字的slot -->
      内容 

      <!-- 当我们想要去渲染到对应的slot中时，需要使用v-slot 和 template或者组件标签 -->
      <template v-slot:name1>这个内容是name1的</template>
      <template v-slot:name2>这个内容是name2的</template>
      <template v-slot:name3>这个内容是name3的</template>

    </Child>

  </div>

</template>
<script>
  import Child from 'Child.vue'
  export default {
    components: {
      Child
    }
  }
</script>

具名插槽使用在组件库封装，有些需要借助样式，但是内容完全由组件使用时自定义的时候，我们可以使用

作用域插槽

Child.vue

<template>
  <div>
    <!-- 我们在使用slot时，可以在slot上定义一些数据 -->
    <slot a="1" b="2">默认值 如果标签中没写内容，这显示默认内容</slot>
    <slot c="3" name="name1"></slot>
  </div>
</template>
<script>
  export default {

  }
</script>

Parent.vue

<template>
  <div>
    <Child>
      <!-- 被渲染到没有名字的slot -->
      <template v-slot="{a, b}">
        {{a}} - {{b}}
      </template>

      <!-- 当我们想要去渲染到对应的slot中时，需要使用v-slot 和 template或者组件标签 -->
      <template v-slot:name1="{c}">
        {{c}}
      </template>


    </Child>

  </div>

</template>
<script>
  import Child from 'Child.vue'
  export default {
    components: {
      Child
    }
  }
</script>

插槽在2.6版本更新了

v-slot:name -> slot=“name”

v-slot=“obj” -> slot-scope=“obj”

v-slot可以缩写成 #

在vueCli中实现cnode的请求案例
实现button组件