vue中插槽的使用记录

最新推荐文章于 2025-05-31 00:57:07 发布

Johannajensen

最新推荐文章于 2025-05-31 00:57:07 发布

阅读量857

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/Sakamodokun/article/details/133634271

本文介绍了Vue中插槽slot的使用，可将DOM元素插入指定位置以实现组件间参数传递。包括默认插槽、具名插槽（通过name属性确保唯一）、作用域插槽（子组件定义数据，父组件可访问）和具名作用域插槽（前两者结合），并给出了相应示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插槽slot中，我们可以将DOM元素插入到指定位置，从而方便我们进行组件之间的参数传递

1.默认插槽

子组件中：

<template>
    <div id="data">
        <div class="demo-datetime-picker">
            <div class="block">
                <span class="demonstration">Default</span>
                <el-date-picker v-model="value1" type="datetime" placeholder="Select date and time" />
            </div>
            <div class="block">
                <span class="demonstration">With shortcuts</span>
                <el-date-picker v-model="value2" type="datetime" placeholder="Select date and time"
                    :shortcuts="shortcuts" />
            </div>
            <div class="block">
                <span class="demonstration">With default time</span>
                <el-date-picker v-model="value3" type="datetime" placeholder="Select date and time"
                    :default-time="defaultTime" />
            </div>
        </div>
        <slot>这是段默认插槽内容</slot>
    </div>
</template>

父组件中：

<template>
    <div class="content">
        <dropdown />
        <datatime>
            <h1>这是父组件中的插槽内容</h1>
        </datatime>
    </div>
</template>

结果：

注册的子组件中没有内容时

注册的子组件中有内容时

2.具名插槽(在插槽中定义一个name属性来确保该插槽的唯一)

子组件中：

<template>
    <div id="data">
        <div class="demo-datetime-picker">
            <div class="block">
                <span class="demonstration">Default</span>
                <el-date-picker v-model="value1" type="datetime" placeholder="Select date and time" />
            </div>
            <div class="block">
                <span class="demonstration">With shortcuts</span>
                <el-date-picker v-model="value2" type="datetime" placeholder="Select date and time"
                    :shortcuts="shortcuts" />
            </div>
            <div class="block">
                <span class="demonstration">With default time</span>
                <el-date-picker v-model="value3" type="datetime" placeholder="Select date and time"
                    :default-time="defaultTime" />
            </div>
        </div>
        <slot name="checkdata">这是段默认插槽内容</slot>
    </div>
</template>

父组件中（使用template模板，中的v-slot属性，后跟子组件中定义的名字）：

<template>
    <div class="content">
        <dropdown />
        <!-- 具名插槽 -->
        <datatime>
            <template v-slot:checkdata>
                <h1>这是插槽内的内容</h1>
            </template>
        </datatime>


    </div>
</template>

3.作用域插槽（子组件中定义数据，父组件那边就可以访问）

子组件定义动态数据：

<template>
    <div class="flex flex-wrap items-center">
        <el-dropdown>
            <el-button type="primary">
                Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>Action 1</el-dropdown-item>
                    <el-dropdown-item>Action 2</el-dropdown-item>
                    <el-dropdown-item>Action 3</el-dropdown-item>
                    <el-dropdown-item>Action 4</el-dropdown-item>
                    <el-dropdown-item>Action 5</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <el-dropdown split-button type="primary" @click="handleClick">
            Dropdown List
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>Action 1</el-dropdown-item>
                    <el-dropdown-item>Action 2</el-dropdown-item>
                    <el-dropdown-item>Action 3</el-dropdown-item>
                    <el-dropdown-item>Action 4</el-dropdown-item>
                    <el-dropdown-item>Action 5</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    <slot :text="content" :count="2"></slot>
    </div>
</template>
  
<script setup>
import { ArrowDown } from '@element-plus/icons-vue'

const handleClick = () => {
    // eslint-disable-next-line no-alert
    alert('button click')
}
const content = '你好，我是子组件传递过来的值'
</script>

父组件可以直接利用v-slot进行数据的接收，接收名称自定义即可：


<template>
    <div class="content">
        <dropdown />
        <!-- 作用域插槽 -->
        <dropdown v-slot="props">
            {{ props.count }},{{ props.text }}
        </dropdown>
    </div>
</template>

<script setup>
import dropdown from '../views/dropdown.vue';
import datatime from '../views/datatime.vue';
</script>

<style scoped>
.content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
</style>

结果：

4.具名作用域插槽（以上两种的结合）

子组件：

<template>
    <div id="data">
        <div class="demo-datetime-picker">
            <div class="block">
                <span class="demonstration">Default</span>
                <el-date-picker v-model="value1" type="datetime" placeholder="Select date and time" />
            </div>
            <div class="block">
                <span class="demonstration">With shortcuts</span>
                <el-date-picker v-model="value2" type="datetime" placeholder="Select date and time"
                    :shortcuts="shortcuts" />
            </div>
            <div class="block">
                <span class="demonstration">With default time</span>
                <el-date-picker v-model="value3" type="datetime" placeholder="Select date and time"
                    :default-time="defaultTime" />
            </div>
        </div>
        <slot name="checkdata" :games="games">这是段默认插槽内容</slot>
    </div>
</template>
  
<script setup>
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
const games = ['红色警戒', '穿越火线', '超级玛丽']
const shortcuts = [
    {
        text: 'Today',
        value: new Date(),
    },
    {
        text: 'Yesterday',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date
        },
    },
    {
        text: 'A week ago',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
        },
    },
]
</script>
<style scoped>
.demo-datetime-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-datetime-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-datetime-picker .block:last-child {
    border-right: none;
}

.demo-datetime-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>

父组件（template模板中用'#'来定义子组件中的名称，后面跟自定义的参数名称）：

    <template>
        <div class="content">
            <dropdown />

            <!-- 具名作用域插槽 -->
            <datatime>
                <template #checkdata="headerprops">
                    {{ headerprops }}
                </template>
            </datatime>

        </div>
    </template>

    <script setup>
    import dropdown from '../views/dropdown.vue';
    import datatime from '../views/datatime.vue';
    </script>

    <style scoped>
    .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    </style>

结果：