コンポーネントとは何ですか？
コンポーネントは、vue.jsの最も強力な機能の1つです。コンポーネントは、HTML要素を拡張し、再利用可能なコードをカプセル化できます。より高いレベルでは、コンポーネントはカスタム要素であり、Vue.jsのコンパイラは特別な機能を追加します。場合によっては、コンポーネントは、IS機能とともに拡張されたネイティブHTML要素の形式でもあります。
この記事は、公式文書に基づいて編集者によって編集されたより詳細な説明です。コードはより完全で完璧で、初心者が学ぶのに非常に適しています。
公式文書：
http://cn.vuejs.org/guide/components.html#u52a8_u6001_u7ec4_u4ef6
動的コンポーネントを以下に説明します。
simple：
これは、いくつかのコンポーネントがマウントポイントの下に配置され、親コンポーネントの変数に基づいて表示するものを決定するか、それらのいずれも表示されないことを意味します。
②ダイナミックスイッチ：
マウントポイントのコンポーネントタグを使用して、V-Bind：is =”コンポーネント名”を使用して、一致するコンポーネント名を自動的に見つけます。そうでない場合は、表示されません。
マウントされたコンポーネントを変更するには、IS指令の値を変更するだけです。
例のコードのように：
<div id = "app"> <button @click = "toshow"> click>子コンポーネントが表示される</button> <コンポーネントv-bind：is = "what_to_show"> </component> </div> <script> var vm = new vue（{el： '＃app'、data：{who_to_show： "first" {compont： "{art：{// ["1番目]、「3番目」、「arr.indexof（this_to_show）;コンポーネント1 </div> "}、2番目：{// 2番目の子コンポーネントテンプレート：" <div>ここに子コンポーネント2 </div> "}、3番目：{// 3番目の子コンポーネントテンプレート：" <div>ここに子コンポーネント3 </div> "}、}}）; </script>説明：
親コンポーネントのボタンをクリックすると、自動的に切り替えて子コンポーネントが表示されます（変数の値に基づいて決定されます。
ceep-Alive
簡単に言えば、切り替えられたコンポーネント（現在表示されていない）が直接削除されます。
これを見る。$の子供属性の親コンポーネントの属性では、子コンポーネントが存在する場合、属性の長さが1であり、子コンポーネントが存在しない場合、属性の長さは0であることがわかります（子コンポーネントは取得できません）。
子コンポーネントを切り替える必要がある場合、次回の表示時に再レンダリングを避けるために、メモリに保持する必要があります。次に、コンポーネントタグにKeep-Alive属性を追加する必要があります。
コードとして：
<div id = "app"> <button @click = "toshow"> click>子コンポーネントが表示される</button> <コンポーネントv-bind：is = "what_to_show" keep-alive> </component> </div> <script> vm = new vue（{el： '＃app'、data：{firt_tos： "" first "" firt "" var arr = [second "、" 3番目のindexof（this_to_show）;チャイルドコンポーネントテンプレート： "<div>ここに子コンポーネント1 </div>"}、2番目：{// 2番目の子コンポーネントテンプレート： "<div>ここに子コンポーネント2 </div>"}、3番目：{// 3番目の子コンポーネントテンプレート： "<div>ここに子供コンポーネント3 </div>"}、}）; </script>説明：
最初のケースでは、VM。$ Children属性には1つの要素（最初のコンポーネント）のみがあります。ボタンをクリックして切り替えた後、VM。$ Children属性に2つの要素があります。再度切り替えた後、3つの要素があります（3つのサブコンポーネントはすべてメモリに保持されます）。
その後、どのように切り替えても、3つの要素があります。
hookフックをアクティブにします
簡単に言えば、それは怠zyなロードです。
たとえば、AJAXリクエストを開始するときは、しばらく待つ必要があります。 Ajax要求が完了した後にロードする必要がある場合は、Activateフックを使用する必要があります。
特定の使用に関しては、Activateは、テンプレートやデータなどの属性と同じレベルの属性です。フォームは関数です。機能にはデフォルトでパラメーターがあります。このパラメーターは関数です。コンポーネントは、この関数が実行されたときにのみ切り替えられます。
その遅延ロードを証明するために、サーバー側では、特定のAJAX要求が開始されたときに、コンテンツを返す前に2秒遅れることを設定します。したがって、コンポーネント2を初めて切り替えるときは、正常に切り替える前に2秒待つ必要があります。
<div id = "app"> <button @click = "toshow"> click>子コンポーネントが表示される</button> <コンポーネントv-bind：is = "what_to_show"> </component> </div> <script> var vm = new vue（{el： '＃app'、data：{who_to_show： "first" {compont： "{art：{// [最初の "、「3番目の」、" arr.indexof（index <3）;テンプレート： "<div>ここに子コンポーネント1 </div>"}、2番目：{// 2番目の子コンポーネントテンプレート： "<div>ここに子どもコンポーネント2があります。{{hello}} </div>"、data：function（）{return {hello： ""}}、componte（ self。 3 </div> "}}}）; </script>コード効果：
【1 component初めてコンポーネント2に切り替えると、表示する前に2秒待つ必要があります（Ajaxが開始されるため）。
[2] Keep-Aliveの場合、2番目以降のコンポーネント2に切り替えるとき、待つ必要はありません。ただし、Ajaxコンテンツは、Ajaxが初めて開始されてから2秒後に表示する必要があります。
【3 deキープアライブなし（切り替えた後はメモリに保存されません）、コンポーネント2に2回目に切り替えるときは待つ必要があります。
[4]待っているとき、それは再びスイッチングに影響しません（つまり、コンポーネント2を待つとき、再び切り替えてコンポーネント3に直接切り替える）。
説明：
【1】アクティブ化は、コンポーネントが初めてレンダリングされた場合にのみ実行され、関数は一度だけ実行されます（コンポーネントが表示されるとコンポーネントが遅延します）
【2 diveキープアライブがない場合、スイッチコンポーネントが表示されるたびに再レンダリングされます（以前に隠されたときに破壊プロセスが実行されたため）。
transition-Modeトランジションモード
簡単に言えば、動的コンポーネントをアニメーションに変更します。 （遷移セクションの指示を覚えておいてください。遷移は動的コンポーネントに適しています）
デフォルトでは、エントリと出口は一緒に完了します。 （入力するコンテンツは、y軸の下側を指す出口コンテンツの下に表示される場合があります。出口後、エントリは正しい位置に表示されます）。
Transition-Mode =” Out-in”の場合、アニメーションは最初に終了してから入力します。
Transition-Mode =” In-Out”の場合、アニメーションが最初になり、後に出ます（デフォルトで発生する傾向がある問題と同じ）。
サンプルコード：（カスタムトランジション名とanimate.cssファイルを使用）
<div id = "app"> <button @click = "toshow"> click>子コンポーネントが表示されるように</button> <コンポーネントv-bind：is = "that_to_show" transition-mode = "out-in"> </component> </div> <script> vue.transition（ "bunce"、{enterclass： 'bunclass：' bunclass 'BounceOutright'}）var vm = new vue（{el： '＃app'、data：{who_to_show： "first"}、method：{toshow：function（）{// switched display ar = ["first"、 "second"、 "third"、 "" This.Which_to_show = arr [index + 1]; {{hello}} </div> "、data：function（）{return {hello：" "}}}、3番目：{// 3番目の子コンポーネントテンプレート：" <div>ここに子供コンポーネント3 </div> "}}}}}）; </script>上記は、編集者が紹介したVuejsの第12章の動的コンポーネントです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！