Javascript 在Vue中，如何将样式添加到此选项卡框组件并删除添加到其他选项卡框组件的样式？

在Vue中，如果要单击某个组件向该组件添加样式，并清除以前在其他tabbox组件上单击过的其他样式，我应该怎么做？提前谢谢

这是子组件的代码

<template>
   <div :class="tabStyle" :style="boxstyle"     @click="tabClick(name)">
     {{name}}
     <div class="selected-icon" v-show="isSelected"></div> <!--selected styles-->
     <div class="tick" v-show="isSelected"></div>   <!--selected styles-->
   </div>
</template>

<script>
  export default {
  name: "tabbox",
  props: {
    name: {
      type: String,
      default: ""
    },
    boxstyle: {
     type: Object,
     defalult: {}
   }
 },
data() {
    return {
      isSelected: false,
      tabStyle: {
        "selected-box": false,
        "unselected-box": true
      }
    };
},
methods: {
    tabClick(name) {
      this.isSelected = true;         
      this.borderChange("selected-box","unselected-box")//style add
      this.$emit("getTabName", name);
    },
    borderChange(first, second) {
      this.tabStyle[first] = true;
      this.tabStyle[second] = false;
    }
  }
};
</script>


 <style lang="scss" scoped>
.tab-box {
  display: inline-block;
  position: relative;
  text-align: center;
  padding: 1%;
  font-size: 1rem;
  width: 20%;
}
.unselected-box {
  border: solid 1px #b9a7a76b;
  @extend .tab-box;
}
.selected-box {
  border: solid 1px #5ddb14;
  @extend .tab-box;
}
.selected-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-color: #5ddb14 transparent;
  border-width: 0 0 20px 25px;
  border-style: solid;
}

.tick {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fff;
  &::after {
    content: "✓";
  }
}
</style>

<template>
    <div class="select-tab" :style="tabStyle">
        <Header></Header>


        <div class="label-content" v-for="(item,index) in categories" :key="index">
            <meaning-label :name="item.name"></meaning-label>
            <div class="box-content">
                <TabBox @getTabName="getTabName" :name="_item.name" :boxstyle="styles" v-for="(_item,_index) in item.categoryList" :key="_index">
                </TabBox>

            </div>
        </div>

    </div>
</template>

<script>
import TabBox from "@/components/FindMusic/SelectTab/TabBox";
import MeaningLabel from "@/components/FindMusic/SelectTab/MeaningLabel";
import Header from "@/components/FindMusic/SelectTab/Header";
export default {
  components: {
    TabBox,
    MeaningLabel,
    Header
  },
  methods: {},
  data() {
    return {
      styles: {
        width: ""
      },
      allStyles: {
        width: "94%",
        margin: "2px 1.5%"
      },
      _categories: {}
    };
  },
  mounted() {
    this.categories = this.$store.state.CategoriesInfo.categories;
  },
  props: {
    tabStyle: {
      type: Object,
      default: {}
    },
    categories: {
      type:Array,
      default: []
    }
  },
  methods: {       
    getTabName(name){
      this.$emit('getTabName',name)
    }
  }
};
</script>

<style lang="scss" scoped>
.box-content {
  display: inline-block;
  vertical-align: top;
  width: 75%;
  font-size: 0;
}
.label-content {
  margin-top: 10px;
}
</style>

{{name}}
导出默认值{
名称：“tabbox”，
道具：{
姓名：{
类型：字符串，
默认值：“
},
箱式：{
类型：对象，
德法卢特：{}
}
},
数据（）{
返回{
选：错，
标签样式：{
“选定框”：false，
“未选择框”：真
}
};
},
方法：{
选项卡单击（名称）{
this.isSelected=true；
此.borderChange（“选定框”、“未选定框”）//样式添加
这个.$emit（“getTabName”，name）；
},
边界更改（第一、第二）{
this.tabStyle[first]=true；
this.tabStyle[second]=false；
}
}
};
.选项卡框{
显示：内联块；
位置：相对位置；
文本对齐：居中；
填充：1%；
字号：1rem；
宽度：20%；
}
.未选框{
边框：实心1px#b9a7a76b；
@扩展.选项卡框；
}
.选定框{
边框：实心1px#5ddb14；
@扩展.选项卡框；
}
.选定图标{
位置：绝对位置；
右：0；
底部：0；
宽度：0；
身高：0；
边框颜色：#5ddb14透明；
边框宽度：0 0 20px 25px；
边框样式：实心；
}
.滴答声{
位置：绝对位置；
右：0；
底部：0；
颜色：#fff；
&：：之后{
内容：“✓";
}
}

这是父组件的代码

<template>
   <div :class="tabStyle" :style="boxstyle"     @click="tabClick(name)">
     {{name}}
     <div class="selected-icon" v-show="isSelected"></div> <!--selected styles-->
     <div class="tick" v-show="isSelected"></div>   <!--selected styles-->
   </div>
</template>

<script>
  export default {
  name: "tabbox",
  props: {
    name: {
      type: String,
      default: ""
    },
    boxstyle: {
     type: Object,
     defalult: {}
   }
 },
data() {
    return {
      isSelected: false,
      tabStyle: {
        "selected-box": false,
        "unselected-box": true
      }
    };
},
methods: {
    tabClick(name) {
      this.isSelected = true;         
      this.borderChange("selected-box","unselected-box")//style add
      this.$emit("getTabName", name);
    },
    borderChange(first, second) {
      this.tabStyle[first] = true;
      this.tabStyle[second] = false;
    }
  }
};
</script>


 <style lang="scss" scoped>
.tab-box {
  display: inline-block;
  position: relative;
  text-align: center;
  padding: 1%;
  font-size: 1rem;
  width: 20%;
}
.unselected-box {
  border: solid 1px #b9a7a76b;
  @extend .tab-box;
}
.selected-box {
  border: solid 1px #5ddb14;
  @extend .tab-box;
}
.selected-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-color: #5ddb14 transparent;
  border-width: 0 0 20px 25px;
  border-style: solid;
}

.tick {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fff;
  &::after {
    content: "✓";
  }
}
</style>

<template>
    <div class="select-tab" :style="tabStyle">
        <Header></Header>


        <div class="label-content" v-for="(item,index) in categories" :key="index">
            <meaning-label :name="item.name"></meaning-label>
            <div class="box-content">
                <TabBox @getTabName="getTabName" :name="_item.name" :boxstyle="styles" v-for="(_item,_index) in item.categoryList" :key="_index">
                </TabBox>

            </div>
        </div>

    </div>
</template>

<script>
import TabBox from "@/components/FindMusic/SelectTab/TabBox";
import MeaningLabel from "@/components/FindMusic/SelectTab/MeaningLabel";
import Header from "@/components/FindMusic/SelectTab/Header";
export default {
  components: {
    TabBox,
    MeaningLabel,
    Header
  },
  methods: {},
  data() {
    return {
      styles: {
        width: ""
      },
      allStyles: {
        width: "94%",
        margin: "2px 1.5%"
      },
      _categories: {}
    };
  },
  mounted() {
    this.categories = this.$store.state.CategoriesInfo.categories;
  },
  props: {
    tabStyle: {
      type: Object,
      default: {}
    },
    categories: {
      type:Array,
      default: []
    }
  },
  methods: {       
    getTabName(name){
      this.$emit('getTabName',name)
    }
  }
};
</script>

<style lang="scss" scoped>
.box-content {
  display: inline-block;
  vertical-align: top;
  width: 75%;
  font-size: 0;
}
.label-content {
  margin-top: 10px;
}
</style>

从“@/components/FindMusic/SelectTab/TabBox”导入TabBox；
从“@/components/FindMusic/SelectTab/MeaningLabel”导入MeaningLabel；
从“@/components/FindMusic/SelectTab/Header”导入标题；
导出默认值{
组成部分：{
TabBox，
有意义的标签，
标题
},
方法：{}，
数据（）{
返回{
风格：{
宽度：“”
},
所有样式：{
宽度：“94%”，
利润率：“2倍1.5%。”
},
_类别：{}
};
},
安装的（）{
this.categories=此.$store.state.CategoriesInfo.categories；
},
道具：{
标签样式：{
类型：对象，
默认值：{}
},
类别：{
类型：数组，
默认值：[]
}
},
方法：{
getTabName（名称）{
此.$emit（'getTabName'，name）
}
}
};
.方框内容{
显示：内联块；
垂直对齐：顶部；
宽度：75%；
字号：0；
}
.标签内容{
边缘顶部：10px；
}

---

只需将样式保留在我现在单击的选项卡上，并删除我以前单击过的样式。

一种可能的解决方案是从Vue方法获取boxstyle：

<template>
    <div class="select-tab" :style="tabStyle">
        <Header></Header>


        <div class="label-content" v-for="(item,index) in categories" :key="index">
            <meaning-label :name="item.name"></meaning-label>
            <div class="box-content">
                <TabBox @getTabName="getTabName" :name="_item.name" :boxstyle="getTableStyle(_item.name)" v-for="(_item,_index) in item.categoryList" :key="_index">
                </TabBox>

            </div>
        </div>

    </div>
</template>

<script>
import TabBox from "@/components/FindMusic/SelectTab/TabBox";
import MeaningLabel from "@/components/FindMusic/SelectTab/MeaningLabel";
import Header from "@/components/FindMusic/SelectTab/Header";
export default {
  components: {
    TabBox,
    MeaningLabel,
    Header
  },
  methods: {},
  data() {
    return {
      styles: {
        width: ""
      },
      allStyles: {
        width: "94%",
        margin: "2px 1.5%"
      },
      _categories: {},
      activeTabName: ''
    };
  },
  mounted() {
    this.categories = this.$store.state.CategoriesInfo.categories; 
    // you might want to set default activeTabName here or in Vue's watch
  },
  props: {
    tabStyle: {
      type: Object,
      default: {}
    },
    categories: {
      type:Array,
      default: []
    }
  },
  methods: {       
    getTabName(name){
      this.$emit('getTabName',name)
      this.activeTabName = name
    },
    getTableStyle (name) {
      if (name === this.activeTabName) {
        return this.allStyles
      }
      return {}
    }
  }
};
</script>

<style lang="scss" scoped>
.box-content {
  display: inline-block;
  vertical-align: top;
  width: 75%;
  font-size: 0;
}
.label-content {
  margin-top: 10px;
}
</style>

从“@/components/FindMusic/SelectTab/TabBox”导入TabBox；
从“@/components/FindMusic/SelectTab/MeaningLabel”导入MeaningLabel；
从“@/components/FindMusic/SelectTab/Header”导入标题；
导出默认值{
组成部分：{
TabBox，
有意义的标签，
标题
},
方法：{}，
数据（）{
返回{
风格：{
宽度：“”
},
所有样式：{
宽度：“94%”，
利润率：“2倍1.5%。”
},
_类别：{}，
activeTabName:“”
};
},
安装的（）{
this.categories=此.$store.state.CategoriesInfo.categories；
//您可能希望在此处或Vue的手表中设置默认activeTabName
},
道具：{
标签样式：{
类型：对象，
默认值：{}
},
类别：{
类型：数组，
默认值：[]
}
},
方法：{
getTabName（名称）{
此.$emit（'getTabName'，name）
this.activeTabName=name
},
getTableStyle（名称）{
if（name==this.activeTabName）{
返回此文件。所有样式
}
返回{}
}
}
};
.方框内容{
显示：内联块；
垂直对齐：顶部；
宽度：75%；
字号：0；
}
.标签内容{
边缘顶部：10px；
}