代码之家 › 专栏 › 技术社区 › TheLastEmperawr

使用其他组件中的按钮显示对话框

vuejs2 vue.js javascript

TheLastEmperawr · 技术社区 · 6 年前

在我的vue2应用程序中,我有一个父组件和几个子组件。其中一个子组件(我将其称为PaymentComponent)是用于捕获付款信息的简单对话框。

目前,在应用程序中有几个地方可以显示付款对话框。但是,我很难理解如何使用其他子组件中的按钮在PaymentComponent中显示对话框。

下面是PaymentComponent。有关如何使用共享同一父组件的另一组件的按钮显示对话框的提示?

<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>

2 回复 | 直到 6 年前

Roland 6 年前

因此,您希望从应用程序中的任何位置打开模式。

一种解决方案是 event bus ( see more here ),其中可以从每个组件发出一个事件,并在模式组件中侦听该事件。

另一个解决方案是使用 vuex ( see more here )在其中,您可以切换(true、false)存储上的属性,并侦听模式组件(必须是全局组件)以打开或关闭模式。

总之,我有一些与你的情况相似的东西,并使用了一个非常适合我的伟大图书馆,使用它你可以:

1-使用打开模式 this.$modal.show('name-of-modal')

2-使用隐藏模式 this.$modal.hide('name-of-modal')

3-也可以使用对话框和动态组件,而不是模态组件

更多信息 read the docs

Sovalina 6 年前

您可以使用 ref 在您的PaymentComponent上,例如:

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

在PaymentComponent中,定义 open 方法:

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

然后在其他组件上,调用此 打开 方法来自 $root.$refs :

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

Vuetify fiddle here