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的custom events的一个很好的用例。我将更新您的代码，如下所示：

＃login-template

...

<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');
    }
  }
});

#app

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

这里是updated fiddle。

（注意：看来您可能还遇到其他问题，但这已解决了模态切换问题。）

更改模式窗口

1 个答案: