Многоразовый компонент VueJs Dialog с кнопками различного действия

Это концепция передачи функций через атрибут props в Vue.

Позвольте мне показать вам первый пример передачи функции из родительского в дочерний компонент.

Получение значения от родителя

Если вы хотите, чтобы дочерний компонент имел доступ к родительскому методу, кажется очевидным, что нужно просто передать метод прямо в качестве опоры.

<!-- Parent -->
<template>
  <ChildComponent :method = "parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod() {
      // ...
    }
  }
}

И ваш дочерний компонент будет выглядеть так:

// Child
export default {
  props: {
    method: { type: Function },
  },
  mounted() {
    // Use the parent function directly here
    this.method();
  }
}

Получение значения от ребенка

В другом случае вы можете захотеть получить значение из дочернего компонента в родительский, например, функция в родительском компоненте имеет имя параметра.

<!-- Parent -->
<template>
  <ChildComponent :method = "parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod(valueFromChild) {
      // Do something with the value
      console.info('From the child:', valueFromChild);
    }
  }
}

Где в дочернем компоненте вы передаете значение при его вызове:

// Child
export default {
  props: {
    method: { type: Function },
  },
  mounted() {
    // Pass a value to the parent through the function
    this.method("some param name");
  }
}

Что касается вашего вопроса, я думаю, вы можете добиться следующего:

Допустим, у вас есть 3 кнопки отправки, и у каждой кнопки свое действие.

Сначала давайте создадим многоразовое всплывающее диалоговое окно, которое действует как дочерний компонент.

<template>
  <v-dialog
    :value = "dialog"
    persistent
    max-width = "300"
    @input = "$emit('input', $event)"
  >
    <v-card>
      <v-card-title
        class = "text-h5"
        style = "word-break: break-word"
      >
        Title Dialog
      </v-card-title>
      <v-card-actions>
        <v-spacer />
        <v-btn
          color = "green darken-1"
          text
          @click = "close"
        >
          Cancel
        </v-btn>
        <v-btn
          class = "primary"
          @click = "onBtnSubmit"
        >
          Confirm
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>


export default {
  name: 'Dialog',
  props: {
    dialog: {
      type: Boolean,
      required: true
    },
    buttonActionName: {
      type: String,
      required: true
    },
    method: {
      type: Function,
      required: true
    }
  },
  methods: {
    close() {
      this.$emit('close-dialog')
    },
    onReportBtnSubmit() {
      if (this.buttonActionName.length > 0) {
        this.method(this.buttonActionName)
      } else {
        this.method()
      }
      this.close()
    }
  }
}
</script>

<style scoped>

</style>

Я предположил, что вы понимаете концепцию передачи функций через атрибут props в Vue.

// This dialog will pass function `firstBtnSubmit` without param name
<Dialog
   :dialog.sync = "firstBtnDialog"
   :method = "firstBtnSubmit"
   button-action-name = ""
   @close-dialog = "firstBtnDialog= false;"
 />
<v-btn
  @click = "showDialogFirstBtn">
  firstBtnClick
</v-btn>

// This dialog will pass function `secondBtnSubmit` with param name
<Dialog
   :dialog.sync = "secondBtnDialog"
   :method = "secondBtnSubmit"
   button-action-name = "id1"
   @close-dialog = "secondBtnDialog = false;"
 />
<v-btn
  @click = "showDialogSecBtn">
  secondBtnClick
</v-btn>

// you can create a third button below by yourself.

export default {
 data() {
   return {
     firstBtnDialog: false,
     secondBtnDialog: false,
     thirdBtnDialog: false,
  },
 methods: {
    firstBtnSubmit() {
       // Do your stuff
    },
    secondBtnSubmit(param) {
       // do your staff with param 
    },
    thirdBtnSubmit () {
       // do your stuff
    },
    // To trigger dialog to pop up 
    showDialogFirstBtn() {
       this.firstBtnDialog = true;
    },
    showDialogSecBtn() {
       this.secondBtnDialog= true;
    },
    showDialogThirdBtn() {
       this.thirdBtnDialog= true;
    }
  }
}

Примечание

Я НЕ владею всем содержимым, которое я написал здесь.

Все содержимое я получил с другого сайта

Концепция передачи функции в качестве реквизита

Как использовать повторно используемый компонент в Vue: Stackoverflow