防止更改vuetify v选项卡根据从子组件接收的数据进行更改

Question

<template>
  <v-layout row wrap>
    <v-flex xs12 sm12 lg12>
     <div>
        <v-tabs v-model="current_tab">
          <v-tab href="#information">INFORMATION</v-tab>
          <v-tab href="#details">DETAILS</v-tab>
          <v-tab href="#services">SERVICES</v-tab>
          <v-tab-item value="#information" id="information">
           <Information />
          </v-tab-item>
          <v-tab-item value="#details" id="details">
           <Details />
          </v-tab-item>
          <v-tab-item value="#services" id="services">
           <Services />
          </v-tab-item>
         </v-tabs>
       </div>
    </v-flex>
  </v-layout>
</template>

<script>
  import Information from 'views/information/edit.vue';
  import Details from 'views/details/edit.vue';
  import Services from 'views/services/edit.vue';

  export default {
    components: {
      Information,
      Details,
      Services,
    },
    data: function () {
      return {
        current_tab: 'information',
      }
    },
  }
</script>

在每个子组件中，我都定义了一个布尔字段editValue，当我在该特定子组件中编辑表单时，该字段将返回true。

因此，如果任何组件中的editingValue为true，则我想防止更改选项卡并发出警告消息“您的更改未保存。”

下面是子组件示例，其中changes字段设置为false。我正在考虑在所有子组件中的editingValue上添加一个观察程序，并将其值返回给父级，以便以某种方式定义editingValue是否为true，以防止更改选项卡，其他也可以更改。请帮助我完成这项工作。

<template>
  <div>
    
  </div>
</template>

<script>  
  export default {
   data: function () {
    return {
      editingValue: false
    };
   },
   watch: {
    editingValue: function(value) {
     if (value) {
      this.$emit( *return editingValue value to parent* )
     }        
    }
   }
  }
</script>