插槽全家桶

2024-04-24

插槽相当于一个占位符,可以让子组件接受来自父组件的信息

匿名插槽 && 具名插槽 && 插槽作用域

//children
<template>
  <header>
    <slot name="header"></slot>
  </header>
  
  <main>
    //匿名插槽
    <div>
      <slot></slot>
    </div>
    
    //插槽作用域,把子组件中插槽内容传给父组件
  <div v-for="(item,index) in data">
    <slot :data="item" :index="index"></slot>
  </div>
  </main>
  
  <footer>
    <slot name="footer"></slot>
  </footer>
</template>

<script>
  const data = reactive([
    {
      name:'插入1',
      age: 20
    },{
      name:'插入2',
      age: 21
    },{
      name:'插入3',
      age: 22
    },
  ])
</script>



//father
<template>

  <children>
    <template v-slot:header>
      <div>
        插入上面
      </div>
    </template>
    //匿名插槽
    <template v-slot>
      <div>
        插入中间
      </div>
    </template>
    //插槽作用域
    <template v-slot="{data,index}">
      <div>
        {{ data }} //父组件可以通过这种方式拿到子组件插槽中的数据
        {{ index }}
      </div>
    </template>
    <template v-slot:footer>
      <div>
        插入下面
      </div>
    </template>
  </children>

</template>

有关简写
v-slot可以简写为#default,v-slot:footer可以简写为#footer

动态插槽

插槽名称可以进行动态转化

<template>
  <childern>
    <template #[name]>
      <div>
        我乱插
      </div>
    </template>
  </childern>
</template>

<script>
  let name = ref('footer')
  //可以修改插槽名来改变插入位置
</script>

以上就是插槽全家桶的所有内容

写于综合阅览室