Vue3.0-插槽slot

插槽

元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

2.1、匿名插槽

父组件：

<template>
<!-- 插槽、插槽作用域 -->
    <Child>
        <a href="#" >a标签</a>
        <button>按钮</button>
    </Child>
</template>

子组件：

<template>
    <div>
       <p>子组件:</p>
       <slot></slot>
    </div>
</template>

2.2、具名插槽

父组件：

<template>
<!-- 插槽、插槽作用域 -->
    <Child>
         <!-- <template v-slot:link> -->
        <template #link>
            <a href="#" >a标签</a>
        </template>
        

        <!-- <template v-slot:btn> -->
        <template #btn>
            <button>按钮</button>
        </template>
    </Child>
</template>

子组件：

<template>
    <slot name="btn"></slot>
    <p>子组件:</p>
    <slot name="link"></slot>
</template>

2.3、插槽作用域

父组件：

<template>
<!-- 插槽、插槽作用域 -->
    <Child>
         ...
        <!-- <template v-slot:btn> -->
        <!-- slot-scope 的写法已经废弃。 
            v-slot:插槽名="scope" 简写为 #插槽名="scope"-->
        <template #btn="scope">
            <button>按钮、{{scope.title}}、{{scope.mynum}}</button>
        </template>
        <!-- 插槽作用域的作用是在父组件内部使用子组件对应的slot标签 -->
    </Child>
</template>

子组件：

<template>
    <slot name="btn" title="哈哈" :mynum="num"></slot>
    <p>子组件:</p>
    <slot name="link"></slot>
</template>

<script lang='ts' setup>
import { reactive, toRefs } from 'vue';

let {num} = toRefs(reactive({
    num:20
}))
</script>