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

在我的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>

不同意
同意
//从“./stripeConfig.json”导入{stripeKey，stripeOptions}
从“vue stripe elements plus”导入{Card，createToken}
导出默认值{
名称：'分条付款'，
数据（）{
返回{
完成：错误，
条带选项：{
//看https://stripe.com/docs/stripe.js#element-细节选项
},
stripeKey:“，
paymentDialog:false
}
},
组件：{Card}，
方法：{
支付（）{
//createToken返回一个承诺，该承诺在结果对象中解析为
//令牌或错误密钥。
//看https://stripe.com/docs/api#tokens 对于令牌对象。
//看https://stripe.com/docs/api#errors 对于错误对象。
//更一般https://stripe.com/docs/stripe.js#stripe-创建令牌。
createToken（）.then（data=>console.log（data.token））
}
}
}

您可以在您的支付组件上使用

ref

，如：

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

然后在其他组件上，从

$root.$refs

调用此

open

方法：

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

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

一种解决方案是使用

事件总线

（），您可以从每个组件发出一个事件，并在模式组件中侦听该事件

另一种解决方案是使用

vuex

（），在其中可以切换存储上的属性（true、false），并侦听模式组件（必须是全局组件）以打开或关闭模式组件

总之，我有一些类似于你的情况，使用了一个非常适合我的图书馆，你可以：

1-使用

this.$modal.show（'name-of-modal'）打开模式。

2-使用

this.$modal.hide（'name-of-modal'）隐藏模态

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

---

有关更多信息，请显示

v-dialog

组件事件总线工作正常！谢谢你的推荐！很高兴帮助你。但我还是建议你使用那个图书馆！这是非常有用的

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