コンポーネントとは何ですか？
コンポーネントは、vue.jsの最も強力な機能の1つです。コンポーネントは、HTML要素を拡張し、再利用可能なコードをカプセル化できます。より高いレベルでは、コンポーネントはカスタム要素であり、Vue.jsのコンパイラは特別な機能を追加します。場合によっては、コンポーネントは、IS機能とともに拡張されたネイティブHTML要素の形式でもあります。
この記事は、公式文書に基づいて編集者によって編集されたより詳細な説明です。コードはより完全で完璧で、初心者が学ぶのに非常に適しています。
公式文書：
http://cn.vuejs.org/guide/components.html#u52a8_u6001_u7ec4_u4ef6
コンポーネント - その他のアイテムは次のように詳細に説明されています。
①コンポーネントとv-for
簡単に言えば、コンポーネントは複数回再利用されます。
たとえば、テーブル内の特定の行、または電子商取引製品ウィンドウディスプレイ（シングルウィンドウ）は、再利用できるコンポーネントになります。
それらのいずれかをコンポーネントとして記述し、データソースを配列（またはオブジェクトにしますが、個人的には配列だと思います）。 v-for Traversalを介して、コンポーネントの各インスタンスは配列の1つを取得して、すべてのコンポーネントを生成できます。
多重化のため、トラバーサル結果Iとプロップに結合したデータを結合するためにプロップを使用する必要があります。バインディング方法は通常のフォームと同じであり、テンプレートにバインドされています。
サンプルコード：
<div id = "app"> <button @click = "toknowChildren"> Click </button> <table> <tr> <td> index </td> <td> id </td> <td>説明</td> </tr> <tr is = "the-tr" v-for = "i in are </div> <script> var vm = new vue（{el： '＃app'、data：{items：[1、2、3、4]}、method：{toknowchildren：function（）{// switch conpontion display console.log（this。$ children）;}}、コンポーネント：{//ファーストチャイルドコンポーネント：{// "<td> {{index}} </td>" + "<td> {{id}} </td>" + "<td>これは子コンポーネント</td>" + "</tr>"、props：['d、' index ']}}}）; </script>説明：
【1】データを小道具に渡すことを忘れないでください！
【2】インデックスとインデックス$インデックスをバインドします。インデックスが0から始まるため、インデックスがある列は0から始まります。 idはアイテムをトラバースするiにバインドされているため、IDは1から始まります。
[3]これを介して子供のコンポーネントを取得できます。$親コンポーネントの子供（ただし、特に多くのコンポーネントがある場合は、見つけるのが困難です）。
reusable再利用可能なコンポーネントを書き込む：
簡単に言えば、単一使用コンポーネント（ここでは再利用されない、ここでは使用）が他のコンポーネントにしっかりと結合される可能性がありますが、再利用可能なコンポーネントは明確なパブリックインターフェイスを定義する必要があります。 （そうでなければ、他の人はどのようにそれを使用しますか？）
再利用可能なコンポーネントは基本的に外部と対話する必要があり、コンポーネントと外部から開示されたインタラクティブインターフェイスは次のとおりです。
【1】プロップ：外部環境データをコンポーネントに渡すことを許可します。
【2】イベント：コンポーネントが外部環境のアクションをトリガーできるようにします。つまり、マウントポイントにV-onディレクティブを追加することにより、子コンポーネントのイベントがトリガーされると同時に、親コンポーネントのメソッドがトリガーされます。
[3]スロット：配布。親コンポーネントのコンテンツを子コンポーネントのビュー構造に挿入できるようにします。
コードとして：
<div id = "app"> <p>これは最初の親コンポーネントです</p> <widget：the-value = "test" @some = "todo"> <span> vue.comPonent（ "Widget"、{template： "<button @click = 'dosomething'> <slot> </slot>これは再使用されたコンポーネントです。{{thevalue}} </button>"、method：{dosomething：function（）{this。 click "）;}}、props：['thevalue']}）var vm = new vue（{el： '＃app'、data：{test：" test "}、methods：{todo：function.log（"これは最初の親コンポーネント "）}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} var vm_other = new vue（{el： '＃app2'、data：{name： "first"}、method：{todo：function（）{console.log（ "これは別の親コンポーネント"）}}}）; </script>説明：
[1]分布スロットは最初の親コンポーネントで使用され、プロップは値を渡すために使用されます（テストの値を子コンポーネントの値に渡す）。
[2] 2つのコンポーネントの中で、子コンポーネントをクリックした後、メソッドの方法とした方法、そしてイベントのいくつかのイベントが実行されます。次に、マウントポイント @Some = "Todo"を通じて、子コンポーネントのいくつかのイベントと親コンポーネントのTODOメソッドを一緒にバインドします。
したがって、子コンポーネントをクリックした後、親コンポーネントのTODOメソッドが最終的に実行されます。
[3]親コンポーネントの子コンポーネントに渡された値を変更すると、子コンポーネントの値が同期して変更されます（つまり、両方ともデータバウンドになります）。
asyncコンポーネント：
私の理解によると、簡単に言えば、大きなアプリケーションには複数のコンポーネントがありますが、一部のコンポーネントはすぐにロードする必要はないため、複数のコンポーネントに分割されます（たとえば、すぐにロードする必要がありますが、すぐにはない）。
すぐにロードする必要がある場合は、同じファイルに入れる（または同じバッチで一緒にリクエスト）する方が明らかに良いです。
すぐにロードする必要がない場合は、他のファイルに配置できますが、必要に応じてAjaxはサーバーに要求します。
以下のリクエストは非同期コンポーネントです。
vue.jsの関数はvue.jsの関数であり、コンポーネントを工場関数として定義し、コンポーネントの定義を動的に解析することを可能にします。
Webpackで使用できます。
詳細に使用する方法に関しては、私はそれをよく理解していません。チュートリアルにはっきりと書くことができないので、必要に応じて勉強するのを待ちます。
リンク：
http://cn.vuejs.org/guide/components.html#u5f02_u6b65_u7ec4_u4ef6
resuse命名条約の命名：
簡単に言えば、HTMLタグ（divやdivなどは同じ）と機能（vonの代わりにv-onなどの指示書など）はケースに依存します。
リソース名は、多くの場合、ラクダのような（キャメルケースラクダのような）、または単語の最初の文字の大文字の形で書かれています（パスカルケースなど、これを何と呼ぶべきかわかりませんが、これを書くことはめったにありません）。
vue.component（ "mytemplate"、{// ......省略}）vue.jsはこれを自動的に認識して変換できます。
<my-template> </my-template>
上記のテンプレートは、このタグを自動的に置き換えることができます。
Recursiveコンポーネント：
簡単に言えば、再帰コンポーネントは、それ自体に独自のテンプレートを埋め込むコンポーネントです。
コンポーネントが再発したい場合、名前属性が必要であり、Vue.comPonentには独自の名前属性が付属しています。
おそらくこれはこのように見えます、
<div id = "app"> <my-template> </my-template> </div> <scrip> vue.component（ "mytemplate"、{template： "<p> <my-template> </my-template> </p>"}）これは無限の再帰であり、絶対に不可能です。したがって、たとえば、再帰の層の数を制御する必要があります。たとえば、データを介した再帰を制御し、データが空のときに再帰を停止する必要があります。
サンプルコードは次のとおりです。
<ul id = "app"> <li> {{b}} </li> <my-template v-if = "a"：a = "aa"： "b =" b = "> </my-template> </ul> <script> vue.component（" mytemplate "、{mytemplate： '{ul> <ul> <li> </</</ v-if = "a"：a = "aa"：b = "ab"> </my-template> </ul> '、props：["a"、 "b"]}）var data = {a：{a：{a：0、b：3}、b：2}、b：1} var vue：'＃ '＃'＃ '＃sap： （）{this.test += "！"; </script>説明：
[1]通過すると、aの値とbの値は小道具を通して渡され、aの値は再帰後のコンポーネントのaとbの値のデータソースとして使用されます。
次に、再帰コンポーネントに渡された値が存在するかどうかを判断し、もしそうなら、再発し続けます。
Aの値が存在しない場合、再帰は停止します。
ulagmentの例：
簡単に言えば、いわゆるフラグメントインスタンスは、コンポーネントのテンプレートがルートノードの下にないことを意味します。
フラグメントインスタンスコード：
vue.comPonent（ "myTemplate"、{mistplate： '<div> 1 </div>' + '<div> 2 </div>'、}）非フラグメントインスタンス：
vue.comPonent（ "myTemplate"、{template： '<div>' + '<div> 1 </div>' + '<div> 2 </div>' + '</div>'、}）フラグメントインスタンスの次の特性は無視されます。
[1]コンポーネント要素に関する非プロセス制御命令（マウントポイントで書かれ、親コンポーネントによって制御されるV-Show命令など。V-IFはプロセス制御命令に属することに注意してください）。
【2】非プロップス機能（プロップは無視されないことに注意してください。さらに、プロップはマウントポイントに書かれています）。
[3]遷移（つまり、遷移属性は無視されます）;
公式ドキュメントの詳細については、
http://cn.vuejs.org/guide/components.html#u7247_u65ad_u5b9e_u4f8b
Inlineテンプレート
参照：http：//cn.vuejs.org/guide/components.html#u5185_u8054_u6a21_u677f
上記は、編集者があなたに紹介したVuejs第13章のコンポーネントであるその他のアイテムです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！