Отображение диалога с помощью кнопок в других компонентах

Question

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

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

Ниже находится Компонент Payment.Любые советы о том, как я могу отобразить диалоговое окно, используя кнопку из другого компонента, который имеет тот же родительский компонент?

<template>
    <v-dialog v-model="paymentDialog" max-width="500">
        <card
            class='stripe-card'
            :class='{ complete }'
            stripe='pk_test_xxxxxxxxxxxxxxxxxxxx'
            :options='stripeOptions'
            @change='complete = $event.complete'>
        </card>

        <v-spacer></v-spacer>
        <v-btn color="green darken-1" flat="flat" @click.native="paymentDialog = false">Disagree</v-btn>
        <v-btn color="green darken-1" flat="flat" class="pay-with-stripe"  @click='pay' :disabled='!complete'>Agree</v-btn>
    </v-dialog>
</template>

<script>
    // import { stripeKey, stripeOptions } from './stripeConfig.json'
    import { Card, createToken } from 'vue-stripe-elements-plus'

    export default {
        name: 'stripe-payment',

        data () {
            return {
                complete: false,
                stripeOptions: {
                    // see https://stripe.com/docs/stripe.js#element-options for details
                },
                stripeKey: '',
                paymentDialog: false
            }
        },

        components: { Card },

        methods: {
            pay () {
                // createToken returns a Promise which resolves in a result object with
                // either a token or an error key.
                // See https://stripe.com/docs/api#tokens for the token object.
                // See https://stripe.com/docs/api#errors for the error object.
                // More general https://stripe.com/docs/stripe.js#stripe-create-token.
                createToken().then(data => console.log(data.token))
            }
        }
    }
</script>

Answer 1

Таким образом, вы хотите открыть модальное из любого места в приложении.

Одно решение будет с event bus ( подробнее здесь ), в которомВы можете генерировать событие из каждого компонента и прослушивать это событие в модальном компоненте.

Другое решение - использовать vuex ( подробнее здесь ), в котором вы можете переключаться (true,false) свойство хранится и слушает модальный компонент (должен быть глобальным компонентом), чтобы открывать или закрывать модальный.и с его помощью вы можете:

1- открыть модал с помощью this.$modal.show('name-of-modal')

2 - скрыть модал с помощью this.$modal.hide('name-of-modal')

3 - вместо модального вы можете использоватьдиалоговые и динамические компоненты тоже

Подробнее читать документы

Answer 2

Вы можете использовать ref для своего PaymentComponent, например:

<stripe-payment ref="dialog"></stripe-payment>

В PaymentComponent определите метод open:

methods: {
  open() {
    this.paymentDialog = true
  }
}

Затем на других компонентах вызовите этотopen метод из $root.$refs:

methods: {
  openPayment() {
    this.$root.$refs['dialog'].open()
  }
}

Подтвердите скрипку здесь