Vue中slot插槽的使用

Vue中slot插槽的使用

1. 默认slot使用

子组件

//创建默认slot
<template>
  <div>
    <slot></slot>
  </div>
</template>

父组件

//使用默认slot
<template>
  <div class="app">
    <TestSlot>
    	{{name}}
    </TestSlot>
  </div>

</template>

2. 具名slot使用

子组件

//创建slot
<template>
  <div>
    <slot name="s1"></slot>
  </div>
</template>

父组件

//使用slot
<template>
  <div class="app">
    <TestSlot>
    	<template v-slot:s1>
    	{{name}}
    	</template>
    </TestSlot>
  </div>

</template>

3. slot传值

子组件

//创建slot
<template>
  <div>
    <slot name="s1" :age="age"></slot>
    <slot></slot>
    <slot name="s2" :stuName="stuName" :age="age"></slot>
  </div>
</template>

<script setup>
const stuName = "沙和尚"
const age = 16
</script>

父组件

<template>
  <div class="app">
    <TestSlot>
    // slotProps接受slot中传过来的变量,同时传给A组件
      <template v-slot:s2="slotProps">
        {{slotProps}}
        <A :name="slotProps.stuName"/>
      </template>
    </TestSlot>
  </div>

4. 作用域插槽

父组件

<Category title="游戏">
  <template scope="{games}">
    <h4 v-for="item, index in games" :key="index">{{ item }}</h4>

  </template>

</Category>

子组件

 <div class="category">
   <h3>{{title}}分类</h3>
   <slot :games="games"></slot>
 </div>

  props:['title'],
  data() {
    return {
      games: ['红色警戒', '穿越火线', '劲舞团'],
    }
  },