TabIndex值从另一个组件发出更改选项卡值

Question

我需要在成功提交表单后从另一个组件发出tabIndex值，以便它可以返回到第一个索引，我该如何实现这一点?

这是我的组件:

<template>
<b-tabs pills card v-model="tabIndex">
<b-tab title="My Stocks">
<b-container fluid="lg">
<div>
Batches (age shown in weeks)
<br />
<b-table small responsive :items="batches" :fields="fields"></b-table>
</div>
<div v-if="this.isData">
<b-row>
<b-col>
<pie-chart
:chartData="chartData"
:options="chartData.options"
></pie-chart>
</b-col>
</b-row>
<b-row>
<b-col> <b>Total Stock:</b>{{ farmStock }}{{ measurement }} </b-col>
</b-row>
</div>
<div v-else>
<b-row class="justify-content-md-center">
<b-col>
<h6>you have no stocks</h6>
</b-col>
</b-row>
</div>
</b-container>
</b-tab>
<b-tab title="Batches">
<BatchMain></BatchMain>
</b-tab>
</b-tabs>
</template>
<script>
import farmStockService from "@/service/FarmStockService";
import PieChart from "@/components/charts/PieChart.js";
import BatchMain from "@/components/stock/AddBatchMain";
export default {
components: {
PieChart,
BatchMain,
},
data() {
return {
backgroundColor: [],
chartData: {},
measurement: "",
farmStock: 0,
gradeStock: [],
isData: false,
batches: [],
fields: ["name", "age", "quantity", "shellfish", "stock_type"],
tabIndex: 0,
};
},

它有v-model索引的选项卡，现在在同一个目录或文件夹中，我有另一个组件，它被导入到上面的第二个选项卡中，称为BatchMain这个组件有一个提交函数:

async onSubmit(evt) {
evt.preventDefault();
if (!this.validateForm()) return;
try {
let data = {
name: this.form.name,
description: this.form.description,
shellfish: this.form.shellfish,
stockType: this.form.stockType,
gradeList: this.form.gradeList,
age: this.form.age,
quantity: this.form.quantity,
source: this.form.source,
hatchery: this.form.hatchery,
location: this.form.location,
};
let response = await batchService.addBatch(data);
if (response.status === 200) {
makeToast.call(
this,
"Success",
"Batch is created successfully",
"success"
);
setTimeout(() => {
this.$router.replace({ name: "StockMain" });
}, 1000);
}
} catch (e) {
console.log("e", e);
makeToast.call(this, "Error", "Error creating batch", "danger");
}
},

我可以向第二个组件添加什么来使制表符索引返回0，或者只是路由回第一个索引?非常感谢，其中两个是value组件我需要从第二个到第一个发送一些数据所以它将v-model再次更改为0因为选项卡将保留选项卡索引当我有v-model时，我只是不确定如何在组件之间传递数据像这样，我需要在提交方法的末尾

Answer 1

在函数onSubmit中发出一个事件:

this.$emit("submitted");

，然后在父组件中处理它:

<BatchMain @submitted="tabIndex = 0" />