vue登录组件。点登录没有反应，请求支援！

Question

初学者自制登录小组件，点击登录button没有反应
父组件：login.vue

<template v-for="item in loginForm">
    <div class="login">
        <div class="mylogin" align="center">
            <h4>登录</h4>
            <form v-model="loginForm" v-rules="loginRules" label-width="0px">
                <view label="" prop="account" style="margin-top: 30px">
                    <input class="inps" placeholder="账号" v-model="loginForm.account">
                    </input>
                </view>
                <view label="" prop="passWord" style="margin-top: 10px;">
                 <input class="inps" type="password" placeholder="密码" v-model="loginForm.passWord"></input>
                </view>
                <view style="margin-top: 55px;margin-bottom: 20px;">
                 <button type="primary" class="submitBtn" @click.native="submitForm">登录
                    </button>
                    <info ref="info" :message="item"></info>
                </view>
                <div class="unlogin">
                    <router-link :to="{ path: '/forgetpwd' }"> 忘记密码? </router-link>
                    |
                    <router-link :to="{ path: '/register' }">
                        <a href="register.vue" target="_blank" align="right">注册新账号</a>
                    </router-link>
                </div>
                </view>

            </form>
        </div>
    </div>
</template>
<script>
    import info from '@/components/info/info.vue';
    export default {
        name: "Login",
        data: function() {
            return {
                loginForm: {
                    account: "",
                    passWord: "",
                },
                loginRules: {
                    account: [{
                        required: true,
                        message: "请输入账号",
                        trigger: "blur"
                    }],
                    passWord: [{
                        required: true,
                        message: "请输入密码",
                        trigger: "blur"
                    }],
                },
            };
        },
        components: {
            info
        },
        methods: {
            submitForm() {
                const userAccount = this.loginForm.account;
                const userPassword = this.loginForm.passWord;
                if (!userAccount) {
                return this.$message({
                 type: "error",
                message: "账号不能为空！",
                });
                }
                if (!userPassword) {
                return this.$message({
                type: "error",
                message: "密码不能为空！",
                });
                }
                this.$refs.info.sing;

            },
        },
    };
</script>
<style>
    .login {
        width: 100vw;
        padding: 0;
        margin: 0;
        height: 100vh;
        font-size: 16px;
        background-position: left top;
        background-color: #242645;
        color: #fff;
        font-family: "Source Sans Pro";
        position: relative;
    }

    .mylogin {
        width: 240px;
        height: 280px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        padding: 50px 40px 40px 40px;
        box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
        opacity: 1;
        background: linear-gradient(230deg,
                rgba(53, 57, 74, 0) 0%,
                rgb(0, 0, 0) 100%);
    }

    .inps {
        color: #fff;
        background-color: transparent;
        font-size: 18px;
        border-radius: 4px;
        border: 2px solid #c8cccf;
    }

    .submitBtn {
        background-color: transparent;
        color: #39f;
        width: 100px;
        border: 2px solid #fff;
    }
</style>

子组件：info.vue

<template>
    <view >
        <view>你的账号：{{message.account}}</view>
        <view>你的密码：{{message.password}}</view>
    </view>
</template>
 
<script>
    export default {
        name:"info",
        props:['message'],
        methods:{
            sing(){
                console.log(this.message)
            }
        },
        data() {
            return {
                
            };
        }
    }
</script>
 
<style>
 
</style>
 

Answer 1

你这个登陆为什么要放在slot 里？