Javascript 更改模式窗口

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

这是一个项目链接

这是登录模板：

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

注册

注册模板看起来是一样的。

---

我切了一大块。这是Vue的一个很好的用例。我将按如下方式更新您的代码：

#登录模板

...

<div class="login-footer">
  <slot name="footer">
    <div class="change-mode">
      <button class="change-mode-reg" @click="changeModal">Sign up</button>
      <div class="change-mode-line"></div>
    </div>
  </slot>
</div>

...

#应用程序

<div id="app">
  <login v-if="showLogin" @close="showLogin = false" @change="changeModal"></login>
  <signup v-if="showSignup" @close="showSignup = false"></signup>
</div>

这是一个例子

---

（注意：看起来您可能还有一些其他问题，但这解决了您的模式切换问题。）

请为链接添加您的模板代码模板，检查它，如果您非常感谢您，您会非常有帮助！！很高兴我能帮忙！如果这个答案解决了你的问题，请接受并投票。干杯

Vue.component('login', {
  template: '#login-template',
  data() {
    return {
      loginInput: '',
      passwordInput: ''
    }
  },
  methods: {
    sendRequest(e) {
      //code not here
    },
    changeModal() {
      this.$emit('change');
    }
  }
});

<div id="app">
  <login v-if="showLogin" @close="showLogin = false" @change="changeModal"></login>
  <signup v-if="showSignup" @close="showSignup = false"></signup>
</div>