更改模态窗口

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

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

...

登录组件

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>

这是一个更新的小提琴。

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