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

Question

登录页面： login.vue

<template>
    <p>
        <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>
    </p>
</template>

组件：inputText

<template>
    <a class="mint-cell mint-field">
        <p class="mint-cell-left"></p>
        <p class="mint-cell-wrapper">
            <p class="mint-cell-title">
                <span class="mint-cell-text">{{input_name}}</span>
            </p>
            <p class="mint-cell-value">
                <input :placeholder="input_placeholder" type="text" class="mint-field-core" maxlength="10">
                <p class="mint-field-clear" style="display: none;">
                    <i class="mintui mintui-field-error"></i>
                </p> 
                <span class="mint-field-state is-default">
                    <i class="mintui mintui-field-default"></i>
                </span>
                <p class="mint-field-other"></p>
            </p>
        </p>
        <p class="mint-cell-right"></p>
    </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是一样的），然后给出返回值登录
请问如何实现这样的登录方法，给个思路即可
或者说我这么写根本就不对，还有更好的方法，也麻烦推荐下，扔个链接也行，谢谢！！

Answer 1

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