网站建设与推广员岗位职责,百度一下搜索一下,国家重点项目建设网站,万网官网域名注册不仅父组件可以通过插槽方式访问并控制子组件传入的数据#xff0c;而且可以控制传入父组件时插槽的名称#xff0c;从而使不同的插槽根据名称的不同#xff0c;使用场景也不同#xff0c;例如在一个小区详细页中#xff0c;可以根据小区类型#xff0c;调用不同名称的详…不仅父组件可以通过插槽方式访问并控制子组件传入的数据而且可以控制传入父组件时插槽的名称从而使不同的插槽根据名称的不同使用场景也不同例如在一个小区详细页中可以根据小区类型调用不同名称的详细页插槽这种插槽就是动态插槽。
接下来结合一个完整的实例来演示使用动态插槽实现一个tab选项卡的功能。
实例7-6 动态插槽应用
1. 功能描述
在一个父组件中添加一个子组件子组件中是各种不同名称的slot插槽当点击父组件选项卡标题时就选中了一个插槽的名称则在内容中显示对应名称的插槽。
2. 实现代码
在项目的components 文件夹中添加一个名为“Parent”的.vue文件该文件的保存路径是“components/ch7/part6/”在文件中加入如清单7-13所示代码。
代码清单7-13 Parent.vue代码
templateulli :keyindex v-foritem,index in tabs :class{ focus: index sIdx } clickclk(item.sName, index){{ item.title }}/li/ulchildtemplate #[sName]div classcontent{{ 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;
}ulli {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代码
templatediv v-for(item, index) in names :keyindexslot :nameitem/slot/div
/template
script
export default {data() {return {names: [s1,s2,s3]}}
}
/script
3. 页面效果
保存代码后页面在Chrome浏览器下执行的页面效果如图7-7所示。
4. 源码分析
在本实例的子组件Child源码中向父组件提供了多个不同name的slot插槽供父组件中template元素使用使用的方法是在模板中添加#符号符号后面是slot插槽的名称由于该名称是一个动态的变量sName因此需要使用[]方括号进行包裹。
在父组件中当用户点击某个导航栏选项时在单击事件中获取到对应的slot插槽名称和索引号则将前者传给变量sName使父组件中template元素替换sName名称的插槽;后者传给变量sIdx通过sIdx值获取到对应的数组内容并显示在插槽中。
