javascript - vue如何让组件处理登录逻辑？

问题描述

问 题

登录页面： login.vue

<template>
    <div>
        <img src="../assets/logo.png">
        <pub-header :pmsg="title"></pub-header>
        <input-text :input_name="input_username"></input-text>
        <input-text :input_name="input_password"></input-text>
        <btn-login></btn-login>
    </div>
</template>

组件：inputText

<template>
    <a class="mint-cell mint-field">
        <div class="mint-cell-left"></div>
        <div class="mint-cell-wrapper">
            <div class="mint-cell-title">
                <span class="mint-cell-text">{{input_name}}</span>
            </div>
            <div class="mint-cell-value">
                <input :placeholder="input_placeholder" type="text" class="mint-field-core" maxlength="10">
                <div class="mint-field-clear" style="display: none;">
                    <i class="mintui mintui-field-error"></i>
                </div> 
                <span class="mint-field-state is-default">
                    <i class="mintui mintui-field-default"></i>
                </span>
                <div class="mint-field-other"></div>
            </div>
        </div>
        <div class="mint-cell-right"></div>
    </a>
</template>

<script>
    import Vue from 'vue'
    import MintUI from 'mint-ui'
    import 'mint-ui/lib/style.css'
    Vue.use(MintUI)

    export default {
        name: 'inputText',
        data() {
            return {
                msg: ''
            }
        },
        props: {
            input_name: {
                default:'账号'
            },
            input_placeholder: {
                default:'请输入该字段'
            },
        }
    }
</script>

本人初学者，想写个demo练习一下vue2.0
我想两个组件完成各自的验证（比如一个验手机，一个验邮箱，但ui是一样的），然后给出返回值登录
请问如何实现这样的登录方法，给个思路即可
或者说我这么写根本就不对，还有更好的方法，也麻烦推荐下，扔个链接也行，谢谢！！

解决方案

我前段时间总结的一个项目，或许能帮助你理解这个过程。
【vue+axios】一个项目学会前端实现登录拦截

这篇关于javascript - vue如何让组件处理登录逻辑？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！