vue3插槽 slot

vue3插槽 slot

一、基本使用

子组件

<template>
    <slot name="button"></slot>
    <slot name="input"></slot>
    <slot name="h2"></slot>
</template>

父组件
只要没有提供内容的slot就不会被被渲染

<script setup>
import Hello from './components/Hello.vue'
</script>

<template>
  <Hello>
    <template v-slot:button>
      <button>按钮</button>
    </template>

    <template v-slot:input>
        <input type="text"/>
    </template>

    <template v-slot:h2>
        <h2>插槽</h2>
    </template>
  </Hello>
</template>

二、循环 高级使用

子组件

<template>
    <div>
        <slot :list="list" :message="message"></slot>
    </div>
</template>

<script>
export default{
    data(){
        return{
            message:'你好',
            list:[1,2,3,4,5]
        }
    }
}
</script>

父组件

<!--作用域插槽，父组件替换插槽的标签，但是数据由子组件提供-->
<Hello>
<!--包含所有插槽prop的对象命名为slotProps-->
  <template v-slot:default="slotProps">
    <ul>
    <li v-for="item in slotProps.list" :key="item">{{item}}</li>
    </ul>
   </template>
</Hello>

渲染出来