更改模态窗口

Question

我有 2 个模态窗口：注册和登录。当我点击“注册”按钮时，模态窗口应该会改变。我该怎么办？

这是一个项目链接。

https://jsfiddle.net/Alienwave/0kqj7tr1/4/

Vue.component('signup', {

    template: '#signup-template'

})

Vue.component('login', {

    template: '#login-template',

    data() {

        return {

            loginInput: '',

            passwordInput: ''

        }

    },

    methods: {

        sendRequest(e) {

                    //code not here

        },

        changeModal() {

                        // THIS!!

        }

    }

});

new Vue({

    el: "#app",

    data() {

        return {

        showLogin: true,

            showSignup: false

        }

        }

        });

这是登录模板：

<template id="login-template">

        <transition name="modal">

            <div class="login-mask">

                <div class="login-wrapper">

                    <div class="login-container">

                        <div class="login-footer">

                            <slot name="footer">

                                <div class="change-mode">

                                    <button class="change-mode-reg" @click="">Sign up</button> <!-- THIS BUTTON SHOULD CHANGE MODAL! -->

                                </div>

                            </slot>

                        </div>

                    </div>

                </div>

            </div>

        </transition>

    </template>

注册模板看起来一样。我切了一大块。

Answer 1

这是 Vue自定义事件的一个很好的用例。我会按如下方式更新您的代码：#登录模板...<div class="login-footer">&nbsp; <slot name="footer">&nbsp; &nbsp; <div class="change-mode">&nbsp; &nbsp; &nbsp; <button class="change-mode-reg" @click="changeModal">Sign up</button>&nbsp; &nbsp; &nbsp; <div class="change-mode-line"></div>&nbsp; &nbsp; </div>&nbsp; </slot></div>...登录组件Vue.component('login', {&nbsp; template: '#login-template',&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; loginInput: '',&nbsp; &nbsp; &nbsp; passwordInput: ''&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; sendRequest(e) {&nbsp; &nbsp; &nbsp; //code not here&nbsp; &nbsp; },&nbsp; &nbsp; changeModal() {&nbsp; &nbsp; &nbsp; this.$emit('change');&nbsp; &nbsp; }&nbsp; }});＃应用程序<div id="app">&nbsp; <login v-if="showLogin" @close="showLogin = false" @change="changeModal"></login>&nbsp; <signup v-if="showSignup" @close="showSignup = false"></signup></div>这是一个更新的小提琴。（注意：看起来您在这里可能还有其他一些问题，但这可以解决您的模式切换问题。）