Vue的插槽的使用

插槽的使用场景

形成组件，供别人使用，但是数据结构之类的内容不固定，可以动态传入

分为三种插槽：默认插槽、具名插槽、作用域插槽

复习一下组件间传值的使用

组件传值

使用props接收

<template>
    <el-card v-for="item in tableData" :key="item.id">
        <h3>{{ item.content }}</h3>
    </el-card>
</template>

<script>
import { onBeforeMount, reactive } from "vue";

export default {
    name: "List",
    props: ["tableData"],
    setup() {
        const data = reactive({});
        onBeforeMount(() => {});
        return { data };
    },
};
</script>

<template>
    <el-card>
        <list :tableData="data.tableData1" />
    </el-card>
</template>

<script>
import { onBeforeMount, reactive } from "vue";
import List from "@/components/List"

export default {
    name: "Home",
    components: { List },
    setup() {
        const data = reactive({
            tableData1: [
                {
                    id: 1,
                    content: "001"
                },
                {
                    id: 2,
                    content: "002"
                },
                {
                    id: 3,
                    content: "003"
                },
            ]
        });
        onBeforeMount(() => {

        });
        return { data };
    },
};
</script>

默认插槽

将内容插入在默认位置，只有一个插槽时可以这样写

<template>
    <el-card>
        <slot></slot>
    </el-card>
</template>

<script>
import { onBeforeMount, reactive } from "vue";

export default {
    name: "List",
    setup() {
        const data = reactive({});
        onBeforeMount(() => {});
        return { data };
    },
};
</script>

插入时可以直接写，也可以采用v-slot写

<template>
    <el-card>
        <List>
            <h3 v-for="item in data.tableData1" :key="item.id">{{item.content}}</h3>
        </List>
        <el-divider />
        <List>
            <template v-slot:default>
                <h3 v-for="item in data.tableData1" :key="item.id">{{item.content}}</h3>
            </template>
        </List>
    </el-card>
</template>

<script>
import { onBeforeMount, reactive } from "vue";
import List from "@/components/List"

export default {
    name: "Home",
    components: { List },
    setup() {
        const data = reactive({
            tableData1: [
                {
                    id: 1,
                    content: "001"
                },
                {
                    id: 2,
                    content: "002"
                },
                {
                    id: 3,
                    content: "003"
                },
            ]
        });
        onBeforeMount(() => {

        });
        return { data };
    },
};
</script>

具名插槽

当需要插入多个地方时，可以采用具名插槽

<template>
    <el-card>
        <slot name="listVertical"></slot>
        <el-divider />
        <slot name="listHorizontal"></slot>
    </el-card>
</template>

<script>
import { onBeforeMount, reactive } from "vue";

export default {
    name: "List",
    setup() {
        const data = reactive({});
        onBeforeMount(() => {});
        return { data };
    },
};
</script>

这里需要采用 v-slot，在Vue3中，slot被弃用了

<template>
    <el-card>
        <List>
            <h3 slot="listVertical" v-for="item in data.tableData1" :key="item.id">{{item.content}}</h3>
            <h3 slot="listHorizontal" v-for="item in data.tableData1" :key="item.id" style="display: inline-block; width: 100px;">{{item.content}}</h3>
        </List>
    </el-card>
    <el-card>
        <List>
            <template v-slot:listVertical>
                <h3 v-for="item in data.tableData1" :key="item.id">{{item.content}}</h3>
            </template>
            <template v-slot:listHorizontal>
                <h3 v-for="item in data.tableData1" :key="item.id" style="display: inline-block; width: 100px;">{{item.content}}</h3>
            </template>
        </List>
    </el-card>
</template>

<script>
import { onBeforeMount, reactive } from "vue";
import List from "@/components/List"

export default {
    name: "Home",
    components: { List },
    setup() {
        const data = reactive({
            tableData1: [
                {
                    id: 1,
                    content: "001"
                },
                {
                    id: 2,
                    content: "002"
                },
                {
                    id: 3,
                    content: "003"
                },
            ]
        });
        onBeforeMount(() => {

        });
        return { data };
    },
};
</script>

作用域插槽

这个插槽的使用情况是数据不由使用者传入，而是在组件中被写好了，然后使用者需要拿到这个数据；可以想象这样一个场景，在表格中你需要显示一些额外内容，然后这个额外内容和每行的数据有关，此时你如何简单的拿到每行的数据呢，这个作用域插槽可以比较好的帮助你

数据放好了，通过 :row=“item” 传给调用者，调用者通过 scope.row 即可获取到对象属性值

<template>
    <el-card>
        <slot :row="item" v-for="item in data.tableData"></slot>
    </el-card>
</template>

<script>
import { onBeforeMount, reactive } from "vue";

export default {
    name: "List",
    setup() {
        const data = reactive({
            tableData: [
                {
                    id: 1,
                    content: "001",
                },
                {
                    id: 2,
                    content: "002",
                },
                {
                    id: 3,
                    content: "003",
                },
            ],
        });
        onBeforeMount(() => {});
        return { data };
    },
};
</script>

这里通过 #default=“scope” 写入，别的方式我发现好像不识别

<template>
    <el-card>
        <List>
            <template #default="scope">
                <h4 v-if="scope.row.id == 1" style="display: inline-block;">显示链接 {{scope.row.content}}</h4>
            </template>
        </List>
    </el-card>
</template>

<script>
import { onBeforeMount, reactive } from "vue";
import List from "@/components/List"

export default {
    name: "Home",
    components: { List },
    setup() {
        const data = reactive({
            
        });
        onBeforeMount(() => {

        });
        return { data };
    },
};
</script>