Vue中slot的常见用法

Posted 2021-06-09 aiguangyuan

Vue中的slot对于编写可复用可扩展的组件是再合适不过了，常见的用法有以下3种：

1. 插入一个匿名的slot，匿名的情况只适用于只插入一个的时候；

2. 插入有名的slot，当插入的slot有多个的时候，需要按名占位；

3. 在slot的内部可以将值通过有名slot传递出去，让外层组件接收；

以下是代码实例：

首先是App.vue，调用了所有组件，插入了所有的有名和匿名的Slot。

<template>
    <div id="app">
        <!-- 外层组件 -->
        <todo-list>
            <!-- 插入匿名slot -->
            <todo-item
                @delete="handleDelete"
                v-for="(item, index) in list"
                :key="index"
                :title="item.title">
                <!-- 插入有名slot，接受内部返回的值 -->
                <template v-slot:header="{ value }">
                    <!-- 接收有名slot内部返回的值 -->
                    <span>前置图标--{{ value }}</span>
                </template>

            </todo-item>
        </todo-list>
    </div>
</template>

<script>
import TodoList from "./components/TodoList.vue";
import TodoItem from "./components/TodoItem.vue";

export default {
    name: "app",
    components: {
        TodoItem,
        TodoList,
    },
    data() {
        return {
            list: [
                {
                    title: "课程1",
                },
                {
                    title: "课程2",
                },
            ],
        };
    },
    methods: {
        handleDelete(title){
            alert(title);
        }
    },
};
</script>

以下是App组件里引入的TodoList组件，这是一个可以插入匿名Slot的组件。

<template>
    <ul>
        <!-- 匿名slot -->
        <slot></slot>
    </ul>
</template>
<script>
export default {
    data: function () {
        return {};
    },
};
</script>

以下是App组件里引入的TodoItem组件，这是一个可以插入有名Slot的组件。

<template>
    <li>
        <!-- 插入一个有名slot，名为header -->
        <slot name="header" :value="value"></slot>
        <span>--{{title}}--</span>
        <!-- 插入一个有名slot，名为tail，如果没有传值，则默认值为“哈哈哈”-->
        <slot name="tail">哈哈哈</slot>
        <button @click="handleClick" style="margin-left:10px;">删除</button>
    </li>
</template>
<script>
export default {
    props: {
        title: String,
    },
    data: function () {
        return {
            // 给有名slot传值返回给外层组件
            value: "呵呵呵",
        };
    },
    methods: {
        handleClick() {
            // 触发delete方法，给父组件传值
            this.$emit("delete", this.title);
        },
    },
};
</script>
<style scoped>

</style>

以下是最终的渲染结果：