Vueコンポーネント化開発の汎用型ポップアップフレームの実現

この文章は主にコンポーネント開発についての理解を共有して、入門したばかりの仲間に回り道をしないようにして、開発効率を高めます。
多くの入門したばかりの仲間が、よく重複したコードを書いています。これらのコードは一般的に大同小異です。この場合、どうやって開発と学習をより効率的にするか、コンポーネント化の思想が重要です。ここでは簡単なポップアップフレームを設計することによって、子供たちにコンポーネント化の応用を共有します。
コンポーネント&コンポーネント化
コンポーネント化は、いくつかの多重化可能な機能を実装する標準化動作である。コンポーネントは、一般的に、独自の内部UI要素、スタイル、およびJS論理コードを含んでおり、アプリケーションのどこにでも簡単に埋め込むことができます。コンポーネントの内部は、他のコンポーネントを使用して、より複雑なコンポーネントを構成することができます。
実際の開発においては、重複コードの作成を避け、よりコアな部分に力を入れる必要があるので、これらの重複コードを抽出して、共通のコンポーネントにパッケージ化し、開発効率を向上させる必要があります。
基本構造
まず、ポップアップボックスの基本的な構造です。

<div class="modal">
   <div class="mask"></div>
   <div class="modal-dialog">
    <div class="modal-header">
     <span>  </span>
     <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="icon-close"></a>
    </div>
    <div class="modal-body">
     <slot name="body"></slot>
    </div>
    <div class="modal-footer">
      <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn">  </a>
      <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default">  </a>
     </div>
    </div>
   </div>
  </div>

​ 基本構造は簡単です。ちょっと注意してください。 slaotスロットには、name属性が提供されていない場合、defaultという名前が隠されています。そして、親のセットに指定されていない場合は、 slaotの v-slot属性であれば、内容はdefaultスロットに伝えられます。
ここで定義しました slaotのname属性 bodyという名のスロットがマッチします。 v-slaot:bodyの内容。
注意してください。親のコンポーネントで呼び出しは必要です。