vue建立组件无校验版-编程知识

vue建立组件无校验版

实现功能：
切换，相当于tab
在这里插入图片描述

1、非组件代码：

<template><div><div class="tabStyle"><div v-for="(item,index) in tabTitle" :key="index" class="bordItemStyle" :class="choseIndex===index?'itemActiveStyle':'itemStyle'" @click="handleChose(index)">{{item}}</div></div></div>
</template><script>export default {name: "home",data() {return {choseIndex: 0,tabTitle:['近7天','近15天','近30天'],}},mounted() {},methods: {handleChose(index) {this.choseIndex = index;},}}
</script><style lang="scss" scoped>.tabStyle {display: flex;.itemStyle {background-color: #ffffff;}.itemActiveStyle {color: #ffffff;background-color: #025DF4;}.itemStyle,.itemActiveStyle {padding: 8px 20px;cursor: pointer;}.bordItemStyle {border-top: 1px solid rgb(220, 223, 230);border-bottom: 1px solid rgb(220, 223, 230);border-left: 1px solid rgb(220, 223, 230);&:last-child {border-right: 1px solid rgb(220, 223, 230);}}}
</style>

2、转换为组件代码
组件：文件src/components/TabBlock/index.vue
有两个要传递的参数，选项名tabTitle,激活的选项索引activeIndex.还有一个要传递的事件handleChange，该事件有一个参数index。

<template><div><div class="tabStyle"><div v-for="(item,index) in tabTitle" :key="index" class="bordItemStyle" :class="activeIndex===index?'itemActiveStyle':'itemStyle'" @click="$emit('handleChange',index)">{{item}}</div></div></div>
</template><script>export default {name: "TabBlock",props: {tabTitle: {type: Array,default: ''},activeIndex: {type: Number,default: ''},},data() {return {}},mounted() {},methods: {}}
</script><style lang="scss" scoped>.tabStyle {display: flex;.itemStyle {background-color: #ffffff;}.itemActiveStyle {color: #ffffff;background-color: #025DF4;}.itemStyle,.itemActiveStyle {padding: 8px 20px;cursor: pointer;}.bordItemStyle {border-top: 1px solid rgb(220, 223, 230);border-bottom: 1px solid rgb(220, 223, 230);border-left: 1px solid rgb(220, 223, 230);&:last-child {border-right: 1px solid rgb(220, 223, 230);}}}
</style>

调用组件的文件

<template><div><TabBlock :tabTitle="titles" :activeIndex="choseIndex" @handleChange="handleChose"></TabBlock></div>
</template><script>import TabBlock from '@/components/TabBlock/index.vue'export default {name: "home",components:{TabBlock},data() {return {titles:['近7天','近15天','近30天'],choseIndex:0,}},mounted() {},methods: {handleChose(index){this.choseIndex = index;console.log("选中的索引",this.choseIndex)console.log("选中的名称",this.titles[this.choseIndex])}}}
</script><style lang="scss" scoped></style>