書かれており、カスタムコンポーネントのVUEの使い方

三つのスキル、親コンポーネント - >値の転送サブアセンブリ（小道具）、サブアセンブリ - >親コンポーネントが通過値（$ EMIT）、スロット（スロット）は、別個のコンポーネントのために、小道具を成分として使用されます内部射出コアコンテンツ; $ EMITは、他のコンポーネントを統合するために、いくつかのロジックによって、個々の部品を作るために使用されます。あなたが車をすれば、ホイールは包装される個別の構成要素であるたとえば、特定の点については、小道具は、あなたがパターンを設定し、車両の全体的な形状に応じて車両の車輪のスタイルに適合することができますしたい番号を意味し、パターンなど;および$は役割がこれらの車輪と全体の車は完全に運用合うことができるようにすることです発します。

（1）小道具はサンズアセンブリとの間の値を渡す使用して達成することができる
。$エミット（）は、親コンポーネントが、サブアセンブリ実装メソッドを呼び出し、これを用いて、（2）

A. commponentsでのファイルのコンポーネントファイルを作成します。

II。コンポーネントコード（書き込み）

index.vue

<template>
    <div class="cusdealed">
        <div class="submited" v-if="showStatus==1">
            <div class="submitRes">
                <img class="resImg" src="../../common/img/repectSubmit.png" alt="">
            </div>
            <div class="submitTip tipwidth">该单据已经提交过了，不用重复提交哦！</div>
        </div>

         <div class="submited" v-if="showStatus==2">
            <div class="submitRes">
                <img class="resImg" src="../../common/img/invalid.png" alt="">
            </div>
            <div class="submitTip">单据已失效，不能扫单入库！</div>
        </div>

        <div class="submited" v-if="showStatus==3">
            <div class="submitRes">
                <img class="resImg" src="../../common/img/invalid.png" alt="">
            </div>
            <div class="submitTip">找不到该单据，不能扫单入库！</div>
        </div>
        
    </div>
</template>
<script type="text/javascript" src="./logic.js"></script>
<style lang="less" scoped>
    @import './style.css';
</style>

style.less

//样式文件
@import '../../common/less/px2rem.less';
@import '../../common/less/base.less';

.cusdealed {
  .submited {
    .submitRes {
      .px2rem(150);
      width: @px2rem;
      height: @px2rem;
    }

    .submitRes {
      .px2rem(227);
      margin: @px2rem auto 0;

      .resImg {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .submitTip {
    .px2rem(58);
    //   height: @px2rem;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: @px2rem;
    }
    .submitTip{
        .px2rem(32);
        font-size: @px2rem;
    }
    .tipwidth{
        .px2rem(384);
        width: @px2rem;
    }
    .submitTip{
        .px2rem(50);
        margin: @px2rem auto 0;
    }
  }
}

logic.js

//逻辑文件
import { Spinner } from 'vux'

export default {
    name: 'cusDealing',
    data() {
        return {
          showStatus:1
        }
    },
    components: {
        Spinner,
    },
    props: {
        // showStatus: Number
      },
      computed: {
    
      },
      watch: {
        showStatus(val) {
          console.log(val, 'showStatus---')
          return val;
        }
      },
    methods: {
       
    },
    mounted() {
     
    }
}

III。使用方法

コンポーネントの紹介


使用してページ
のHTMLを：

  <!-- 处理完弹窗 -->
    <div class="dealed" :style="'padding-top:'+marginTop+'px;height:'+bodyheight+'px;'" v-if="dealStatus==2">
        <div class="dealedContent">
            <Cusdealed :showStatus="showStatus"></Cusdealed>
            <div class="Iknow" @click="Iknow">我知道了</div>
        </div>
    </div>

JS：


効果