Javascript 单击vue.Js中对话框上的按钮后，从方法打开vue组件

我有以下两个vue组件：

firstcomponent.vue

<template>
<div class="profile-setup" v-show="profile">
    <div class="md-layout md-gutter">
        <div class="md-layout-item md-size-100">
            <div class="md-title">Setup your profile</div>
        </div>
        <div class="md-layout-item md-size-50">
            <md-field>
                <label>Names</label>
                <md-input v-model="real"></md-input>
                <span class="md-helper-text">Your real names</span>
            </md-field>
        </div>
        <div class="md-layout-item md-size-50">
            <md-field>
                <label>Display Name</label>
                <md-input v-model="display"></md-input>
                <span class="md-helper-text">Your display name</span>
            </md-field>
        </div>
        <div class="md-layout-item md-size-50">
            <md-field>
                <label>Account Name</label>
                <md-input v-model="account"></md-input>
                <span class="md-helper-text">Your account name</span>
            </md-field>
        </div>
        <div class="md-layout-item md-size-50">
            <md-field>
                <label>Phone number</label>
                <span class="md-prefix">+250</span>
                <md-input v-model="number" type="number"></md-input>
                <span class="md-helper-text">Your phone number</span>
            </md-field>
        </div>
        <div>
            <div>
                <md-dialog-confirm
                        :md-active.sync="active"
                        md-title="Account created!"
                        md-content="Do you want to create <strong>RWPay</strong> account?"
                        md-confirm-text="Yes"
                        md-cancel-text="No thanks"
                        @md-cancel="onCancel"
                        @md-confirm="onConfirm" />
            </div>

        </div>
    </div>

    <md-dialog-actions>
        <md-button class="md-dense md-raised md-primary" @click="active = true">Save</md-button>
    </md-dialog-actions>
</div>

<template>
<div class="secondcomponent">
    <md-tabs md-alignment="centered">
        <md-tab id="tab-mobile" md-label="Mobile Money" to="/components/tabs/mobile">
            <div class="md-layout md-gutter">
                <div class="md-layout-item md-size-100">
                    <md-field>
                        <label>Phone number</label>
                        <span class="md-prefix">+250</span>
                        <md-input v-model="number" type="number"></md-input>
                    </md-field>
                </div>
            </div>
        </md-tab>

        <md-tab id="tab-card" md-label="Debit/Credit Card" to="/components/tabs/card">
            <div class="md-layout md-gutter">
                <div class="md-layout-item md-size-100">
                    <md-field>
                        <label>Card type</label>
                        <md-select v-model="cardtype" name="cardtype" id="cardtype" md-dense>
                            <md-option value="visa">Visa</md-option>
                            <md-option value="mastercard">Mastercard</md-option>
                            <md-option value="american-express">American Express</md-option>
                        </md-select>
                    </md-field>
                </div>
                <div class="md-layout-item md-size-100">
                    <md-field>
                        <label>Card number</label>
                        <md-input v-model="card" maxlength="16"></md-input>
                    </md-field>
                </div>
                <div class="md-layout-item md-size-50">
                    <md-field>
                        <label>Expiry date</label>
                        <md-input v-model="month" maxlength="2"></md-input>/
                        <md-input v-model="year" maxlength="2"></md-input>
                    </md-field>
                </div>
                <div class="md-layout-item md-size-50">
                    <md-field>
                        <label>CSC</label>
                        <md-input v-model="exp" maxlength="3"></md-input>
                    </md-field>
                </div>
            </div>
        </md-tab>
    </md-tabs>
    <md-dialog-actions>
        <md-button class="md-dense md-raised">Cancel</md-button>
        <md-button class="md-dense md-raised md-primary">Save</md-button>
    </md-dialog-actions>
</div>

设置您的个人资料
名字
你的真名
显示名称
您的显示名称
帐户名
您的帐户名
电话号码
+250
你的电话号码
拯救

导出默认值{
名称：'firstcomponent'，
数据：（）=>({
real:null，
显示：空，
帐户：空，
编号：空，
活动：错误，
值：null，
个人资料：对
}),
方法：{
onConfirm（）{
console.log（“第二次确认”）；
},
onCancel（）{
console.log（“第二次取消”）；
}
}
}

secondcomponent.vue

<template>
<div class="profile-setup" v-show="profile">
    <div class="md-layout md-gutter">
        <div class="md-layout-item md-size-100">
            <div class="md-title">Setup your profile</div>
        </div>
        <div class="md-layout-item md-size-50">
            <md-field>
                <label>Names</label>
                <md-input v-model="real"></md-input>
                <span class="md-helper-text">Your real names</span>
            </md-field>
        </div>
        <div class="md-layout-item md-size-50">
            <md-field>
                <label>Display Name</label>
                <md-input v-model="display"></md-input>
                <span class="md-helper-text">Your display name</span>
            </md-field>
        </div>
        <div class="md-layout-item md-size-50">
            <md-field>
                <label>Account Name</label>
                <md-input v-model="account"></md-input>
                <span class="md-helper-text">Your account name</span>
            </md-field>
        </div>
        <div class="md-layout-item md-size-50">
            <md-field>
                <label>Phone number</label>
                <span class="md-prefix">+250</span>
                <md-input v-model="number" type="number"></md-input>
                <span class="md-helper-text">Your phone number</span>
            </md-field>
        </div>
        <div>
            <div>
                <md-dialog-confirm
                        :md-active.sync="active"
                        md-title="Account created!"
                        md-content="Do you want to create <strong>RWPay</strong> account?"
                        md-confirm-text="Yes"
                        md-cancel-text="No thanks"
                        @md-cancel="onCancel"
                        @md-confirm="onConfirm" />
            </div>

        </div>
    </div>

    <md-dialog-actions>
        <md-button class="md-dense md-raised md-primary" @click="active = true">Save</md-button>
    </md-dialog-actions>
</div>

<template>
<div class="secondcomponent">
    <md-tabs md-alignment="centered">
        <md-tab id="tab-mobile" md-label="Mobile Money" to="/components/tabs/mobile">
            <div class="md-layout md-gutter">
                <div class="md-layout-item md-size-100">
                    <md-field>
                        <label>Phone number</label>
                        <span class="md-prefix">+250</span>
                        <md-input v-model="number" type="number"></md-input>
                    </md-field>
                </div>
            </div>
        </md-tab>

        <md-tab id="tab-card" md-label="Debit/Credit Card" to="/components/tabs/card">
            <div class="md-layout md-gutter">
                <div class="md-layout-item md-size-100">
                    <md-field>
                        <label>Card type</label>
                        <md-select v-model="cardtype" name="cardtype" id="cardtype" md-dense>
                            <md-option value="visa">Visa</md-option>
                            <md-option value="mastercard">Mastercard</md-option>
                            <md-option value="american-express">American Express</md-option>
                        </md-select>
                    </md-field>
                </div>
                <div class="md-layout-item md-size-100">
                    <md-field>
                        <label>Card number</label>
                        <md-input v-model="card" maxlength="16"></md-input>
                    </md-field>
                </div>
                <div class="md-layout-item md-size-50">
                    <md-field>
                        <label>Expiry date</label>
                        <md-input v-model="month" maxlength="2"></md-input>/
                        <md-input v-model="year" maxlength="2"></md-input>
                    </md-field>
                </div>
                <div class="md-layout-item md-size-50">
                    <md-field>
                        <label>CSC</label>
                        <md-input v-model="exp" maxlength="3"></md-input>
                    </md-field>
                </div>
            </div>
        </md-tab>
    </md-tabs>
    <md-dialog-actions>
        <md-button class="md-dense md-raised">Cancel</md-button>
        <md-button class="md-dense md-raised md-primary">Save</md-button>
    </md-dialog-actions>
</div>

电话号码
+250
卡片类型
签证
万事达卡
美国运通
卡号
到期日
/
CSC
取消
拯救

导出默认值{
名称：'secondcomponent'，
数据：（）=>({
编号：空，
cardtype:null，
卡片：空，
月份：空，
年份：空
})
}

因此，我希望当我单击对话框上的Yes按钮时，它会打开secondcomponent.vue，当我单击No Thank时，它会转到我稍后指定的另一个组件

---

我在拉威尔使用Vue。谢谢你的帮助

你说的“打开secondcomponent.vue”到底是什么意思

你的意思是它应该在相同的上下文中显示它？或者将其发送到特定的路线

如果您只是想在相同的上下文中显示它，您可以使用

在component1数据中定义名称，并根据调用的模态方法进行切换

从“SecondComponent.vue”导入SecondComponent
从“ThirdComponent.vue”导入ThirdComponent
导出默认值{
名称：'firstcomponent'，
组件：{Secondcomponent，Thirdcomponent}，
数据：（）=>({
real:null，
显示：空，
帐户：空，
编号：空，
活动：错误，
值：null，
简介：没错，
showAdditionalInfo:false，
附加信息：空
}),
方法：{
onConfirm（）{
this.showAdditionalInfo=true
this.additionalInfo='secondcomponent'
},
onCancel（）{
this.showAdditionalInfo=true
this.additionalInfo='thirdcomponent'
}
}
}

是，我想在相同的上下文中显示secondcomponent.vue。那么，是否可以在调用它的第一个组件名中定义第二个组件名？是的，我更新了代码示例。您需要导入两个组件，以显示确认方法和取消方法的组件。然后可以在模板中添加

组件。并更改确认和取消方法中的名称当我导入第二个和第三个组件时，它会发送一个错误模块not found！请记住，我希望在同一个vue组件中显示这些组件，这是第一个（因此，从技术上讲，当我选择“是”或“否”时，必须隐藏第一个打开）哦，好的！然后您需要使用包装器组件。第二个。然后从第一个组件发出事件侦听它，然后有条件地渲染我想我正在调用blade.php中的第一个组件，它是包装器，在blade.php中显示firstcomponent.vue之后，我必须执行条件来显示是显示secondcomponent还是第三个component