vue3 slot slot

vue3 slot slot

1. Basic use

Subassembly

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

The parent component
will not be rendered as long as there is no slot providing content

<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>

Second, advanced use of the cycle

Subassembly

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

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

parent component

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

rendered out