Блог

У меня есть компонент Alet.vue [код для повторного использования].

     <v-dialog v-if="alertDict" v-model="alertDict.showDialog" max-width="460">
      <v-card>
        <v-card-title>Titile</v-card-title>
        <v-card-text>Message</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn olcor="green darken-1" text @click="alertDict.showDialog = false">Ok</v-btn>
          <v-btn olcor="green darken-1" text @click="alertDict.showDialog = false">Cancel</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  

И другим компонентом является Home.vue

 <template>
  <div>
      <Alert
      :alertDict="alert_dict"
      />  
  </div>
</template>
<script>
import Alert from "../components/Alert";
export default {
   methods: {
    ClickFunc: function () {
      this.alert_dict.showDialog = True
      if (User clicked Yes){
          console.log("Result")
      }
      Here I want to wait for users event to know which button is clicked by user.
      My Dialogbox is showing. 
    }
}


</script>

  

Здесь я хочу дождаться события users, чтобы узнать, какую кнопку нажимает пользователь.
Отображается мое диалоговое окно.

 <template>
    <v-dialog v-if="alertDict" :value="alertDict.showDialog" max-width="460">
      <v-card>
        <v-card-title>Titile</v-card-title>
        <v-card-text>Message</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn olcor="green darken-1" text @click="onClick('ok')">Ok</v-btn>
          <v-btn olcor="green darken-1" text @click="onClick('cancel')">Cancel</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
</template>
<script>
export default {
   methods: {
     onClick(value) {
       this.$emit('response', value);
     }
   }
}
</script>
  

 <template>
  <div>
      <button @click="onClick">show dialog</button>
      <Alert
       :alertDict="alertDict"
       @response="onResponse"
      />  
  </div>
</template>
<script>
import Alert from "../components/Alert";
export default {
   data() {
     return {
       alertDict: {
         showDialog: false
       }
     }
   },
   methods: {
    onClick() {
      // your ClickFunc
      this.alertDict.showDialog = true;
    },
    onResponse(value) {
      console.log(value);
      this.alertDict.showDialog = false;
    }
  }
}
</script>
  

Некоторые предложения здесь,

1. Изучите некоторый стиль кодирования, найдите тот, который имеет смысл для вас, и следуйте ему, это для лучшей читаемости кода. Например, соглашение об именовании, используйте camelcase в коде скрипта js для имени функции и переменной.
   Это один из блогов, который вы можете изучить. https://medium.com/javascript-in-plain-english/javascript-naming-convention-best-practices-b2065694b7d
2. В вашем примере <Alert> является дочерним компонентом, и вы передаете alertDict в <Alert> (дочерний) в качестве реквизита. Затем вы изменяете реквизиты (alertDict.ShowDialog=false) в <Alert> (дочерний).
   Это плохая практика в vue. https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow
   Вместо изменения реквизитов передайте событие родительскому и измените его в родительском.
   Понять эмиссию и событие компонента vue. https://v2.vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event