この情報は、公式文書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> "}、}}）; </scrition>説明：
親コンポーネントのボタンをクリックすると、自動的に切り替えて子コンポーネントが表示されます（変数の値に基づいて決定されます。
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>この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
Vue.jsコンポーネントのチュートリアルについては、特別なトピックVue.jsコンポーネント学習チュートリアルをクリックして学習してください。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。