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

去掉网站侧边栏品牌建设

news 2025/11/6 16:14:41

去掉网站侧边栏,品牌建设 ,长春网站制作企业,企业服务平台介绍不仅父组件可以通过插槽方式访问并控制子组件传入的数据，而且可以控制传入父组件时插槽的名称，从而使不同的插槽根据名称的不同，使用场景也不同，例如在一个小区详细页中，可以根据小区类型，调用不同名称的详…

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

接下来，结合一个完整的实例，来演示使用动态插槽，实现一个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>