コンポーネントの再利用を最大化するため、Vモデルを結合します

良いVUEのプロジェクトを見て、パッケージのコンポーネントを実行する場所であり、例えば、ボタンは、再利用を実現することができ、入念な調査は、ボタンを見て、基本コンポーネントは、Vモデルに直接結合されています：

例えば、あまりにも長い間、ボタン、などの点があります：

ポイントは次のようになると：

私は多くの人々がはるかに便利にカプセル化、DOM、スタイルで、このコンポーネントの現在の構造に直接書き込み、実際には、イベントをクリックして、深刻な結合を引き起こし、また、再利用することはできませんと信じています。

ボタンコンポーネント、approvelBtn.vueを構築するには：

<テンプレート>
    <DIV CLASS = "承認BTN">
      <スパン@をクリック= "サポート" クラス= "APV-BTN">
        <スパンV-IF = "！値">点赞</ span>の
        <スパン-他のV>は親指を持っている</ span>の
      </ span>の
    </ div>
</テンプレート>

<スクリプト>
輸出のデフォルト{
  名前：「ApprovelBtn」
  小道具：{
    値：{
      タイプ：ブール、
      デフォルト：true
    }
  }、
  方法：{
    サポート（） {
      この。$（真「入力」）を放出します
    }
  }
}
</ SCRIPT>

<スタイルは、スコープ>
  .approve-BTN {
    行の高さ：2.5;
  }
  .apv-PIC {
    国境：1pxの固体#CCC。
    パディング：0.5em 1EM。
    国境半径：0.5em;
    カーソル：ポインタ;
  }
</スタイル>

　　

親コンポーネントを導入することができます。

<approvel-BTN Vモデル= "hasApv"> </ approvel-BTN>

　　

変数名、自分のを書くために自由のVモデル、ボタンがクリックされたときに、実行されます

この。$（真「入力」）を放出します

　　

値は「hasApv」に変更します

その後、あなたは何の問題は、再利用を最大化していないここで、このページのボタンを呼び出したいです