vue插槽的基本使用

子组件代码
<template>
  <div>
    <h2>插槽的使用</h2>
    
    <h4>匿名插槽</h4>
    <slot></slot>
    
    <h4>具名插槽</h4>
    <slot name="name"></slot>
    
    <h4>作用域插槽，主要看slot内的写法</h4>
    <template>
      <div v-for="(item, index) in slot_data" :key="index">
        <slot name="scopeing" :label="item.label" :value="item.value"></slot>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  name: 'slotVue',
  data () {
    return {
      slot_data: [
        { label: '一号插槽', value: 1 },
        { label: '二号插槽', value: 2 }
      ]
    }
  }
}
</script>

父组件代码
<template>
  <div class="box">
    <slotTemp>
      <!-- 匿名插槽 ：当子组件中提供了匿名插槽，在父组件中调用该组件时，组件标签内的内容会传递到插槽中-->
      <span style="color: aquamarine">{{ slotdata }}</span>
      
      <!-- 具名插槽 ：当子组件中提供了具名插槽，在父组件中调用该组件时，组件标签内的内容会传递到具名插槽中-->
      <h5 slot="name" style="color: chartreuse">我是具名插槽</h5>
      
      <!-- 作用域插槽：子组件中定义具名插槽，并通过绑定值的形式将值传递给父组件（可以绑定多个），
        父组件中以v-slot:插槽名="slotProps"形式将子组件传递过来的值赋值给slotProps --- -->
      <!-- 使用情景：当父组件中需要显示来自子组件的内容时 -->
      <template v-slot:scopeing="slotProps">
        插槽内容：{{ slotProps.label }} 序号：{{ slotProps.value }}
      </template>
   </slotTemp>
  </div>
</template>
<script>
export default {
  name: 'slotVue',
  data () {
    return {
      slotdata: '我是匿名插槽',
    }
  }
}
</script>

效果