当前位置：首页 > article >正文

Vue前端开发-动态插槽

article 2024/11/29 21:46:03

不仅父组件可以通过插槽方式访问并控制子组件传入的数据，而且可以控制传入父组件时插槽的名称，从而使不同的插槽根据名称的不同，使用场景也不同，例如在一个小区详细页中，可以根据小区类型，调用不同名称的详细页插槽，这种插槽就是动态插槽。

接下来，结合一个完整的实例，来演示使用动态插槽，实现一个tab选项卡的功能。

实例7-6 动态插槽应用

1. 功能描述

在一个父组件中，添加一个子组件，子组件中是各种不同名称的slot插槽，当点击父组件选项卡标题时，就选中了一个插槽的名称，则在内容中，显示对应名称的插槽。

2. 实现代码

在项目的components 文件夹中，添加一个名为“Parent”的.vue文件，该文件的保存路径是“components/ch7/part6/”，在文件中加入如清单7-13所示代码。

代码清单7-13 Parent.vue代码

<template>
    <ul>
        <li :key="index" v-for="item,index in tabs" 
            :class="{ 'focus': index == sIdx }" 
            @click="clk(item.sName, index)">
            {{ item.title }}
        </li>
    </ul>
    <child>
        <template #[sName]>
            <div class="content">
                {{ tabs[sIdx].content }}
            </div>
        </template>
    </child>
</template>
<script>
import Child from "./Child.vue"
export default {
    data() {
        return {
            tabs: [{
                sName: "s1",
                title: "新闻",
                content: "新闻内容很丰富"
            }, {
                sName: "s2",
                title: "热点",
                content: "热点事件也不少"
            }, {
                sName: "s3",
                title: "图片",
                content: "图片资讯更精彩"
            }],
            sName: "s1",
            sIdx: 0
        }
    },
    methods: {
        clk(n, i) {
            this.sName = n;
            this.sIdx = i
        }
    },
    components: {
        Child
    }
}
</script>
<style scoped>
ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-around;
    width: 300px;
    border: solid 1px #ccc;
}

ul>li {
    padding: 8px;
    cursor: pointer;
    width: 84px;
    text-align: center;
}

ul .focus {
    background-color: #ccc;
    font-weight: 700;
}

.content {
    width: 260px;
    border: solid 1px #ccc;
    border-top: none;
    padding: 20px;
}
</style>

在父组件中，导入子组件 Child.vue文件，它的功能是为父组件提供各类名称的模板，父组件根据slot插槽的name属性值就可以动态加载，它的代码如清单7-14所示。

代码清单7-14 Child.vue代码

<template>
    <div v-for="(item, index) in names" :key="index">
        <slot :name="item"></slot>
    </div>
</template>
<script>
export default {
    data() {
        return {
            names: ["s1","s2","s3"]
        }
    }
}
</script>