vueカスタムコンポーネントの書き方と使い方の詳細

この独立したコンポーネントをいくつかの論理によって他のコンポーネントに組み込むために、親コンポーネントの値を伝えるために、親コンポーネント-->サブコンポーネントの値を伝える。具体的なポイントの例を挙げると、車を作りたいならば、車輪はパッケージ化された独立したコンポーネントであり、propsは全体の車の外形によって、あなたが望む車のスタイルに合った柄や模様などをホイールに設定することができます。emitの役割は、これらの車輪が一台の車と完璧にマッチングできるようにすることです。
（1）propsを使用すると、親子コンポーネント間の転送値を実現することができる。
(2)this.$emit()を使用していますが、親のコンポーネントをサブアセンブリで呼び出す方法を実現します。
一.componentsファイルでコンポーネントファイルを作成する

二.コンポーネントコード（書き方）
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() {
   
  }
}

三.使い方
コンポーネントを導入

 ページの使用
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:

効果

はい、本文を見てください。日常生活を結び付けて、道理を説明します。
ネットでよく友達を見ましたが、自分でvueコンポーネントを書いてもいいですか？どうやって自分のプロジェクトに応用できますか？このことは米を煮るのと同じだと思います。
1.まず大きなご飯を作ります。私たちは米が必要です。または、巧妙な女性は米なしの炊けないから、先に自分たちの米を買ってください。つまり、セットファイルを作ってください。ここで自分のloading効果コンポーネントを作るなら、まずloading.vueの中のコードを作成します。vue templateの関連規則に基づいて書いてもいいです。ここでは詳しく説明しません。一番簡単な例を書きます。

2.okです。お米をこんなに楽しく買ってくれました。お米があります。今は鍋に入れておくだけです。この鍋は誰ですか？じゃ、私達は自分でこの鍋を背負います。私たちは関連して作成しました。jsファイルは通常コンポーネントが一つの機能を持っています。各コンポーネントは独自の呼び出しファイル（一鉢の米一つの鍋）を持っていなければなりません。統一のために、私たちはindex.jsと呼んでもいいです。もちろん、この名前は簡単に覚えられます。後の呼び出しの時だけ名前を変えてもいいです。この鍋はどう作ったのですか？話を多くしないで直接上の絵を描きます。

上の3つのこのような違和感のある枠は何ですか？赤い枠：これでまだ問題がありますか？そのファイルを呼び出して、人間に教えてください。ここではもちろん、先ほど自分で作成したloading.vueファイルを呼び出します。黄色枠：私はこの黄色の枠によって、今回の文章の中の重要なポイントと言えるのですが、なぜこのように言いますか？私達は自分のコンポーネントを使ってこのコンポーネントを導き出すのです。この黄色枠のコードは自分のコンポーネントの対応する配置を導き出すのです。その中の非常に下品な波線はこの例の「生命子」です。この名前は他のファイルの中のあなたです。このコンポーネント（ここではloadingコンポーネント）の名前を呼出します。この例では、私たちはコンポーネントを呼び出すときに「Loading」と書きます。白い枠：これは何も言うことがないです。この部品をエクスポートしてメールで受け取りやすいです。
3.原材料の米も炊飯器ができました。今は準備万端です。東の風しかないです。第三部は一文字で炊いています。

黄色の枠の部分はメインファイルのmain.jsに先ほど定義したコンポーネントとこのコンポーネントを導入しました。
最後の最後に、このコンポーネントを使用したいところにを挿入してもいいです。コンポーネントの対応するスタイルとjsコードは直接第一歩のファイルに書いてもいいです。このようにして自分で作ったコンポーネントを楽しく応用します。
（備考：この実例は家庭でvue init webpack-simple xxxを使用している上に、初めて文章を書くことが多いです。不備が多いです。また、ゲストの皆様にもご了承ください。）
締め括りをつける
ここでvueカスタムコンポーネントの書き方と使い方について詳しく解説した文章を紹介します。もっと関連したvueカスタムコンポーネントの内容は私達の以前の文章を検索してください。または次の関連記事を引き続き閲覧してください。これからもよろしくお願いします。