Vue|怎么自定义组件？

初学vue已近3个周，至此开发技能已满足。从eggjs 到 vue 再到 scss，这个过程需要总结和分享。深度学习需要从这里点点滴滴的开始 ~
以上截图是，刚为内容分享使用vue所画的页面。看效果，与原图相比逼真度——真假难分

接下来总结方向，vue中如何自定义组件？如何使用自定义组件？
使用自定义组件必然会牵扯到组件间通讯，怎么实现通讯？

好，上代码

<!-- @/views/Bank-Acc-Transfer.vue-->
<template>
  <div class="acc-transfer-container">
    <div class="header">
      <div class="img-back">
        <span class="img"></span>
      </div>
      <div class="span">
        <span>账户转账</span>
      </div>
    </div>
    <div class="transfer-list">
      <div class="line-row">
        <span class="span-left line-height">收款账户</span>
        <div class="income">
          <span class="income-word">{
   {
   payee}}</span>
          <span class="transfer-img"></span>
        </div>
      </div>

      <div class="line-row line-height">
        <span class="span-left">币种</span>
        <span id="r-span">{
   {
   currency}}</span>
      </div>

      <div class="line-row">
        <span class="span-left">转账金额</span>
        <input
          type="text"
          class="transfer-num"
          ref="infocus"
          maxlength="16"
          autofocus="autofocus"
          @blur.prevent="onblur"
          @focus="onFocus"
          v-model="transferNum"
          style="border:1px solid transparent; outline:none; text-align: right"
        />
        <div v-if="transferNum ? true : false" @click="resetInput">
          <i class="ic_closes"></i>
        </div>
        <el-button style="padding: 8px 6px" type="danger">全额转入</el-button>
      </div>

      <div class="capital-num">
        <span class="ctextw">{
   {
   textw}}</span>
        <span class="ctextm">{
   {
   textm}}</span>
      </div>

      <div class="line-row pay-acc line-height">
        <span class="span-left">付款账户</span>
        <div class="pay">
          <span class<