我在登录页面引用同一个组件分别实现输入账号和密码的功能，点击提交怎么获取值？

我在登录页面引用同一个组件LoginInput分别实现输入账号和密码的功能，当我点击登录按钮时，怎么分别从input里面获取输入的用户和密码

login.vue

<template>
 <div class='login-root' ref='loginRoot'>
 <div class='login-info-root'>
 <div> <img :src="imgList['nameUrl']">
 </div> <div class='username-password-container'>
 <div class='border-container'>
 <img :src="imgList['borderUrl']">
 </div> <div class='input-container'>
 <!-- 账号外层 -->
 <LoginInput
 :marginTop='useInput["marginTop"]'
 :description='useInput["description"]'
 />
 <!-- 密码外层 -->
 <LoginInput
 :marginTop='passwordInput["marginTop"]'
 :description='passwordInput["description"]'
 :type='passwordInput["type"]'
 />
 <!-- 登录按钮 -->
 <div class='btn-login-container' @click='loginUser()'>
 <div class='btn-login'>登录</div>
 </div> </div> </div> </div> </div></template>
<script>
import LoginInput from './components/LoginInput/LoginInput'
export default {
  name: 'login',
 components: {
    LoginInput
  },
 data () {
    return {
      imgList: {
        nameUrl: require('./assets/images/name.png'),
 borderUrl: require('./assets/images/border.png'),
 usernameUrl: require('./assets/images/username.png'),
 passwordUrl: require('./assets/images/password.png'),
 inputBorderUrl: require('./assets/images/input_border.png')
      },
 useInput: {
        marginTop: 'mt58',
 description: '账号'
 },
 passwordInput: {
        type: 'password',
 marginTop: 'mt23',
 description: '密码'
 }
    }
  },
 created () {
    let _this = this
 let widthStandard = 1920
 let heightStandard = 1080
 window.onresize = window.onload = function () {
      let widthPage, heightPage
      if (!(window.attachEvent && !window.opera)) {
        // console.log('clientWidth')
 // widthPage = document.documentElement.clientWidth widthPage = document.documentElement.offsetWidth
 heightPage = widthPage * (heightStandard / widthStandard)
      } else {
        // console.log('innerWidth')
 widthPage = window.innerWidth
 }
      _this.$refs.loginRoot.style.height = `${heightPage}px`
 _this.$refs.loginRoot.style.backgroundSize = `${widthPage}px ${heightPage}px`
 // console.log('widthPage == ', widthPage)
 // console.log('heightPage == ', heightPage) }
  },
 methods: {
    loginUser () {
      let _this = this
 console.log('登录用户按钮')
      console.log(_this.$refs.input)
    }
  }
}
</script>
<style scoped>
 @import './assets/styles/login.css';
</style>

LoginInput.vue

<template>
 <div class='username-container'
 :class='marginTop'
 >
 <div class='username-bg-container'>
 <img :src="imgList['inputBorderUrl']">
 </div> <div class='username-input-container'>
 <div class='username-image-container'>
 <img ref='inputIcon' class='username-image' :src="iconUrl"/>
 </div> <div class='username-select-container'>
 <!-- <div class='username-select-description'>{{description}}</div> -->
 <div class='username-select-input-container'>
 <input class='username-select-input'
 ref='input'
 :placeholder='description'
 @focus='focusInput($event)'
 @blur='blurInput($event)'
 />
 </div> </div> </div> </div></template>
<script>
import * as Helper from '../../../../utils/helper'
export default {
  name: 'LoginInput',
 props: {
    type: {
      type: String,
 default: 'default'
 },
 marginTop: {
      type: String,
 default: 'default'
 },
 description: {
      type: String,
 default: 'default'
 }
  },
 data () {
    return {
      imgList: {
        usernameUrl: require('./assets/images/username.png'),
 passwordUrl: require('./assets/images/password.png'),
 inputBorderUrl: require('./assets/images/input_border.png')
      },
 descriptionLocal: '',
 typeLocal: '',
 iconUrl: ''
 }
  },
 watch: {
    descriptionLocal: function (newVal, oldVal) {
      // console.log('descriptionLocal newVal == ', newVal)
 },
 typeLocal: function (newVal, oldVal) {
      let _this = this
 // console.log('typeLocal newVal == ', newVal)
 if (newVal === 'password') {
        _this.$refs.input.type = 'password'
 _this.$data.iconUrl = _this.$data.imgList['passwordUrl']
      } else {
        _this.$data.iconUrl = _this.$data.imgList['usernameUrl']
      }
    }
  },
 created () {
    let _this = this
 _this.$data.descriptionLocal = _this.description
 _this.$data.typeLocal = _this.type
 },
 methods: {
    focusInput ($event) {
      // console.log('focus事件被执行了')
 let valueInput = Helper.trimValue($event.target.value)
      // console.log('valueInput == ' + valueInput)
 if (valueInput === '') {
        $event.target.placeholder = ''
 }
    },
 blurInput ($event) {
      let _this = this
 let valueInput = Helper.trimValue($event.target.value)
      // console.log('valueInput == ' + valueInput)
 if (valueInput === '') {
        $event.target.placeholder = _this.$data.descriptionLocal
 }
    }
  }
}
</script>
<style scoped>
 @import './assets/styles/login_input.css';
</style>