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

Question

我有两个 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>

<script>
    export default {
        name: 'firstcomponent',
        data: () => ({
            real: null,
            display: null,
            account: null,
            number: null,
            active: false,
            value: null,
            profile: true
        }),

        methods: {
            onConfirm () {
                console.log('second confirmed');
            },
            onCancel () {
                console.log('second canceled');
            }
        }
    }
</script>

第二个组件.vue

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

<script>
    export default {
        name: 'secondcomponent',
        data: () => ({
            number: null,
            cardtype: null,
            card: null,
            month: null,
            year: null
        })
    }
</script>

所以，我希望当我单击对话框上的是按钮时，它会打开第二个组件.vue，当我单击不，谢谢时，它会转到我的另一个组件稍后会具体说明。

我在 laravel 中使用 Vue。感谢您的帮助!

Answer 1

“打开第二个组件.vue”到底是什么意思

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

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

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

 <script>
        import SecondComponent from 'secondcomponent.vue'
        import ThirdComponent from 'thirdcomponent.vue'
    
        export default {
          name: 'firstcomponent',
          components: {Secondcomponent, Thirdcomponent },
          data: () => ({
            real: null,
            display: null,
            account: null,
            number: null,
            active: false,
            value: null,
            profile: true,
            showAdditionalInfo: false,
            additionalInfo: null
          }),
    
          methods: {
            onConfirm () {
                this.showAdditionalInfo = true
                this.additionalInfo = 'secondcomponent'
            },
            onCancel () {
                this.showAdditionalInfo = true
                this.additionalInfo = 'thirdcomponent'
            }
          }
        }
    
    </script>

将 component 标记放置在您想要组件的位置

<小时/>

这就是在同一范围内的情况。如果你想重定向到特定 View ，如果没有 vue-router，它会变得很棘手。

我建议您围绕它构建一个包装器，并在第一个组件中的取消和确认方法上发出一个事件。在组件上监听它，然后有条件地渲染它们。 (您也可以在这里使用动态组件。)

<FistComponent @first="handleFirst" @second="handleSecond"/>
<SecondComponent v-if="showSecond" />
<ThirdComponent v-if="showThird" />