Vue 插槽的基本用法

1.基本概念

        Vue.js 的插槽 (Slots) 是一种强大的功能，允许您定义可重用的模板片段，然后在组件的多个位置插入这些片段。通过插槽，您可以构建复杂的组件结构，同时保持代码的清晰和可维护性。

2.前置条件

插槽是基于组件的所以要有组件

父页面

<template>
    <div>
        <h1>{{ key }}</h1>
        <hr/>
        <!--
         slot:插槽 ,可以用于在父组件中 传1段 Html 到子组件中的指定位置
        -->
        <ShowPage>
          
        </ShowPage>
        
    </div>
</template>

<script>
    
    import ShowPage from '../components/ShowPage.vue' ;
    
    export default {
        name: 'Test6',
        data () {
            return {
              key: '测试6-组件测试'
            }
        },
        components: {
            ShowPage
        }
    }
</script>

子组件

<template>
    <div>
        <h2>{{ key }}</h2>
        
        <div class='default'>
            
        </div>
        
        <hr/>
    </div>
</template>

<script>
    export default {
        name: 'ShowPage',
        data () {
            return {
              key: 'slot测试'
            }
        }
    }
</script>

3.默认的插槽

在父页面的 ShowPage 标签中 加入

<div style="color: red;">
                新的一天
            </div>

在子组件的 class='default' div中加入 

<slot></slot>

就可以把父页面中定义的 红色的"新的一天" 加入到子组件中不需要传值。

4.具名插槽:

您还可以定义具名插槽，这样您可以在父组件中明确指定要插入到哪个插槽的内容。

父页面加入：

<template v-slot:blue>
                <div style="color: blue;">
                    蓝蓝的天 
                </div>
            </template>

子组件中加入：

<h3>
            <slot name="blue"></slot>
        </h3>

就可以把父页面中定义的 蓝色的"蓝蓝的天" 加入到子组件中的h3标签中，

如果不指明就会加到 class='default' 的div标签中。

5.作用域插槽:

有时，您可能希望插槽的内容可以访问到父页面的数据或者子组件的数据能回传给父页面。

为此，您可以定义一个作用域插槽。（作用域插槽就是具名插槽的的扩展）

父页面修改：

<template v-slot:blue="{title}">
                <div style="color: blue;">
                    蓝蓝的天 -- {{ title }}
                </div>
            </template>

子组件修改：

<h3>
            <!-- 把子组件的属性返回给父组件 -->
            <slot name="blue" :title="key"></slot>
        </h3>

就可以把子组件中定义的 key 的内容传给父组件拼到 蓝蓝的天 -- 的后面

然后再传回加入到子组件中的h3标签中。