コンポーネントとは何ですか？
コンポーネントは、vue.jsの最も強力な機能の1つです。コンポーネントは、HTML要素を拡張し、再利用可能なコードをカプセル化できます。より高いレベルでは、コンポーネントはカスタム要素であり、Vue.jsのコンパイラは特別な機能を追加します。場合によっては、コンポーネントは、IS機能とともに拡張されたネイティブHTML要素の形式でもあります。
使用コンポーネント
登録する
前述のように、vue.extend（）を使用してコンポーネントコンストラクターを作成できます。
var mycomponent = vue.extend（{// options ...}）このコンストラクターをコンポーネントとして使用するには、 `vue.component（tag、constructor）` **に登録する必要があります。
//コンポーネントをグローバルに登録すると、タグはmy-componentvue.component（ 'my-component'、mycomponent）です。
<p> vue.jsは、カスタムタグ名にW3Cルール（小文字、短いバーを含む）を義務付けませんが、このルールに従うことをお勧めします。
コンポーネントが登録された後、親インスタンスのモジュールでカスタム要素<my-component>として使用できます。ルートインスタンスを初期化する前に、コンポーネントが登録されていることを確認するには。
<div id = "example"> <my-component> </my-component> </div> // define var mycomponent = vue.extend（{template： '<div> a custom Component！</div>'}）レンダリング：
<div id = "example"> <div>カスタムコンポーネント！</div> </div>
コンポーネントのテンプレートはカスタム要素に置き換えられ、カスタム要素の関数はマウントポイントとしてのみであることに注意してください。インスタンスオプション交換を使用して、交換するかどうかを決定できます。
ローカル登録
各コンポーネントをグローバルに登録する必要はありません。他のコンポーネントでのみ使用できます。インスタンスオプションコンポーネントに登録してください。
var child = vue.extend（{ / * ... * /}）var parent = vue.extend（{template： '...'、components：{// <my-component>親コンポーネントテンプレート 'my-component'：child}}）このカプセル化は、命令、フィルター、遷移などの他のリソースにも適しています。
構文砂糖を登録します
イベントをよりシンプルにするために、コンストラクターの代わりにVue.comPonent（）およびコンポーネントオプションの代わりにオプションオブジェクトを直接渡すことができます。 vue.jsは自動的にVue.extend（）を背面の後ろに呼び出します。
// Vue.comPonent（ 'my-component'、{template： '<div> a custom Component！</div>'}）//これは、ローカル登録var parent = vue.extend：{'my-component'：{{{my-componte： '<div> a custom component！コンポーネントオプションの問題
Vueコンストラクターに渡されたほとんどのオプションは、Vue.extend（）でも使用できますが、データとELの2つの特別なケースがあります。 vue.extend（）のデータオプションとしてオブジェクトを単純に渡すと想像してください。
var data = {a：1} var mycomponent = vue.extend（{data：data}）これに関する問題は、myComponentのすべてのインスタンスが同じ「データ」オブジェクトを共有することです！これは基本的に私たちが望むものではないため、「データ」オプションとして関数を使用して、新しいオブジェクトを返す必要があります。
var mycomponent = vue.extend（{data：function（）{return {a：1}}}）同様に、 `vue.extend（）`で使用する場合、「el」オプションも関数でなければなりません。
テンプレート分析
VueのテンプレートはDOMテンプレートであり、ブラウザネイティブパーサーを単独で実装する代わりに使用します。文字列テンプレートと比較して、DOMテンプレートにはいくつかの利点がありますが、問題があり、有効なHTMLスニペットでなければなりません。一部のHTML要素には、内部に配置できる要素に制限があります。一般的な制限：
•a他のインタラクティブな要素（ボタン、リンクなど）を含めることはできません
•ULとOLはLiを直接含めることができます
•選択は、オプションとオプトグループのみを含めることができます
•テーブルには、ヘッド、tbody、tfoot、tr、col、colgroupのみを直接含めることができます
•TRは、THとTDを直接のみ含めることができます
実際には、これらの制限は予期しない結果につながる可能性があります。単純な場合は機能する可能性がありますが、ブラウザの検証の前に結果を拡大するためにカスタムコンポーネントに頼ることはできません。たとえば、<my-select> <option> ... </option> </my-select>は、my-selectコンポーネントが<select> ... </select>に拡大する場合でも、有効なテンプレートではありません。
別の結果は、UL、選択、テーブルなどの内部要素に制限があるタグでは、カスタムタグ（<component>、<component>、<template>、<partial>などの特別なタグを含む）を使用できないことです。これらの要素内に配置されたカスタムタグは、要素の外側に記載されているため、誤ってレンダリングされます。
カスタム要素の場合、IS属性を使用する必要があります。
<table> <tr is = "my-component"> </tr> </table>
`` `` ``、この時点で使用することはできません、 "
複数の `` `：
<table> <tbody v-for = "アイテムのアイテム"> <tr>偶数</tr> <tr>奇妙なrow </tr> </tbody> </table>
小道具
小道具を使用してデータを渡す
コンポーネントインスタンスの範囲は孤児です。これは、親コンポーネントのデータを子コンポーネントのテンプレート内で直接参照することはできず、参照すべきではないことを意味します。小道具を使用して、データを子供のコンポーネントに渡すことができます。
「Prop」は、親コンポーネントから渡されると予想されるコンポーネントデータのフィールドです。子コンポーネントは、小道具オプションで小道具を明示的に宣言する必要があります。
vue.component（ 'child'、{// props props：['msg']、// propはテンプレートで使用できます// `this.msg`を使用してテンプレートを設定できます： '<span> {{msg}} </span>'}）次に、通常の文字列を渡します。
<child msg = "hello！"> </child>
ハンプvs.水平バー
HTML属性は症例に依存しません。名前形式のキャメルケースを備えた小道具が機能として使用される場合、ケバブケースに変換する必要があります（短い水平線を分離します）：
vue.component（ 'child'、{// javascript props：['mymessage']、テンプレート： '<span> {{mymessage}}} </span>'}）<！ - htmlのケバブケース - > <> <child my-message = "Hello！動的な小道具
v-bindを使用してHTML属性を式に結合するのと同様に、V-Bindを使用してダイナミックプロップを親コンポーネントのデータに結合することもできます。親コンポーネントのデータが変更されるたびに、子コンポーネントにも送信されます。
<div> <入力v-model = "parentmsg"> <br> <child v-bind：my-message = "parentmsg"> </child> </div>
`v-bind`の略語構文を使用すると、通常はより単純です。
<子：my-message = "parentmsg"> </child>
リテラル構文と動的構文
初心者にとって一般的な間違いは、リテラル構文を使用して数値を渡すことです。
<！ - 文字列 "1" - >を渡しました
<comp someprop = "1"> </comp>
それは文字通りの小道具であるため、その値は実際の数字の代わりに文字列 `" 1 "`に渡されます。実際のJavaScript番号を渡す場合は、動的構文を使用して、その値がJavaScript式として計算されるようにする必要があります。
<！ - 実際の番号を渡します - >
<comp：someprop = "1"> </comp>
プロップバインディングタイプ
プロップはデフォルトで一方向の結合です：親コンポーネントのプロパティが変化すると、子コンポーネントに渡されますが、逆はそうではありません。これは、子コンポーネントが親コンポーネントの状態を誤って変更するのを防ぐためです。これにより、アプリケーションのデータフローが理解しにくいです。ただし、.syncまたは.Once結合修飾子を使用して、双方向または1回の時間の結合を明示的に強制することも可能です。
比較構文：
<！ - デフォルトは一方向のバインディング - > <子：msg = "parentmsg"> </child> <！ - 双方向結合 - > <子：msg.sync = "parentmsg"> </child> <！ - 単一のバインディング - > <子：msg.once = "parentmsg"> </child> </child> <
双方向結合は、子コンポーネントのMSG属性を親コンポーネントのParentMSG属性に同期させます。単一のバインディングは、作成後の変化を同期しません。
Propがオブジェクトまたは配列である場合、参照によって渡されることに注意してください。子コンポーネント内で変更すると、使用されるバインディングタイプに関係なく、親コンポーネントの状態に影響します。
小道具検証
コンポーネントは、小道具の検証要件を指定できます。これは、これらの検証要件がコンポーネントのAPIを形成し、他の人がコンポーネントを正しく使用することを保証するため、コンポーネントが他のコンポーネントに与えられた場合に役立ちます。現時点では、プロップの値は、検証要件を含むオブジェクトです。
vue.component（ 'example'、{props：{// basic type detection（ `null`は任意のタイプを意味します）プロップ：//複数のタイプ（1.0.21+）プロップ：[string、number]、// sprupb：{type：string、必須}、// propdへの関数：{type：object、default：function（）{return {msg： 'hello'}}}、//このプロップを双方向のバインディング//バインディングタイプが正しくない場合、警告がスローされている場合、{twoway：true}、// custom perification cuntator：{valut（value） 1.0.12）//値を設定する前に値を変換するpropg：{coerce：function（val）{return val + '' //値を文字列に変換}}、{coerce：function（val）{val）{val）// json文字列をオブジェクトに変換}}}}}}}}}}}}}}}}}}}}}}}}）タイプは次のネイティブコンストラクターにすることができます。
•弦
•番号
•ブール
•関数
•物体
•配列
タイプは、検出のインスタンスを使用するカスタムコンストラクターでもあります。
プロップの確認が失敗した場合、Vueはこの値を子コンポーネントに設定することを拒否し、開発バージョンを使用すると警告が投げられます。
親子コンポーネント通信
親リンク
子コンポーネントは、これを使用して親コンポーネントにアクセスできます。$親。ルートインスタンスの子孫は、これを使用してアクセスできます。$ root。親コンポーネントにはこれに配列があります。$子供の要素を含む子供。
親チェーンの任意のインスタンスにアクセスできますが、子コンポーネントは親コンポーネントのデータに直接依存することを避け、プロップを使用してデータを明示的に渡すようにしてください。また、次のために、子コンポーネントの親コンポーネントの状態を変更することは非常に悪いことです。
1.これにより、親コンポーネントを子コンポーネントと密接に結合することができます。
2.親コンポーネントのみを見ると、親コンポーネントの状態を理解することは困難です。子供のコンポーネントによって変更される可能性があるからです！理想的には、コンポーネントのみがその状態自体を変更できます。
カスタムイベント
VUEインスタンスは、コンポーネントツリーでの通信用のカスタムイベントインターフェイスを実装しています。このイベントシステムは、ネイティブDOMイベントから独立しており、使用方法が異なります。
各Vueインスタンスはイベントトリガーです。
•$ on（）を使用してイベントをリッスンします。
•$ emit（）を使用して、イベントをトリガーします。
•$ dispatch（）を使用してイベントを配布し、イベントは親チェーンに沿ってバブルを分配します。
•$ broadcast（）を使用してイベントを放送すると、イベントはすべての子孫に下向きに送信されます。
DOMイベントとは異なり、Vueイベントは、コールバックが明示的にTrueを返さない限り、バブルプロセス中に最初のコールバックがトリガーされた後に自動的にバブルを停止します。
簡単な例：
<！ - 子コンポーネントテンプレート - > <テンプレートid = "child-template"> <input v-model = "msg"> <button v-on：click = "notify"> dispatch event </button> </template> <！ - 親コンポーネントテンプレート - > <div id = "events-example"> <p> <p> json}} </p> <child> </child> </div> //登録子コンポーネント//現在のメッセージを送信しますvue.component（ 'child'、{template： '＃child-template'、data：function（）{return {msg： 'hello'}}、methods：{notifify（）{if（thismsg.trim（） $ dispatch（ 'child-msg'、this.msg）this.msg = ''}}}} function（msg）{//イベントのコールバックの `this`は、this.messages.push（msg）}}}}}}}}}}}}}}}}}）に登録されているインスタンスに自動的に結合されます。V-onを使用して、カスタムイベントにバインドします
上記の例は非常に優れていますが、親コンポーネントのコードから「Child-MSG」イベントがどこにあるのかを直感的に見ることはできません。サブコンポーネントがテンプレートで使用されているイベントハンドラーを宣言する方が良いでしょう。このサブコンポーネントでは、V-ONを使用してカスタムイベントをリッスンできます。
<child v-on：child-msg = "handleit"> </child>
これにより、Childコンポーネントが「Child-MSG」イベントをトリガーすると、親コンポーネントの「handleIT」メソッドが呼び出されます。親コンポーネントの状態に影響するすべてのコードは、親コンポーネントの「handleIT」メソッドに配置されます。子コンポーネントは、トリガーイベントにのみ焦点を当てています。
サブコンポーネントインデックス
小道具やイベントにもかかわらず、JavaScriptで子供のコンポーネントに直接アクセスする必要がある場合があります。この目的のために、V-REFを使用して、子コンポーネントのインデックスIDを指定できます。例えば：
<div id = "parent"> <user-profile v-ref：profile> </user-profile> </div> var parent = new vue（{el： '#parent'}）//子どもコンポーネントvar子=親。V-REFとV-FORが一緒に使用される場合、REFは、対応する子供コンポーネントを含む配列またはオブジェクトです。
スロットを使用してコンテンツを配布します
コンポーネントを使用する場合、このようにコンポーネントを組み合わせる必要があることがよくあります。
<App> <App-Header> </app-header> <app-footer> </app-footer> </app>
2つのポイントに注意してください：
1。<app>コンポーネントは、マウントポイントにどのコンテンツがあるかを知りません。マウントポイントの内容は、<App>の親コンポーネントによって決定されます。
2。<App>コンポーネントには、独自のテンプレートがある可能性があります。
コンポーネントを組み合わせるためには、親コンポーネントのコンテンツを子コンポーネントのテンプレートと混合する方法が必要です。この処理は、Angularに精通している場合は、コンテンツ分布（または「翻訳」と呼ばれます。 Vue.jsは、現在のWebコンポーネント仕様ドラフトを参照し、元のコンテンツのスロットとして特別な<スロット>要素を使用するコンテンツディストリビューションAPIを実装します。
スコープをコンパイルします
コンテンツディストリビューションAPIに飛び込む前に、まずコンテンツコンパイルの範囲を明確にします。テンプレートは次のとおりです。
<子コンポーネント>
{{msg}}
</childコンポーネント>
MSGは、親コンポーネントのデータ、または子コンポーネントに結合したデータにバインドする必要がありますか？答えは親コンポーネントです。コンポーネントスコープは単純です。
親コンポーネントテンプレートのコンテンツは、親コンポーネントの範囲内にコンパイルされます。子コンポーネントテンプレートの内容は、子コンポーネントの範囲内にコンパイルされます
よくある間違いは、親コンポーネントテンプレート内の子コンポーネントのプロパティ/方法に指示をバインドしようとすることです。
<！ - 無効 - >
<子コンポーネントv-show = "somechildperty"> </child-component>
SomeChildPropertyが子コンポーネントのプロパティであると仮定すると、上記の例は予想どおりに機能しません。親コンポーネントテンプレートは、子コンポーネントのステータスを知らないはずです。
サブコンポーネントの命令をコンポーネントのルートノードにバインドする場合は、そのテンプレートでこれを行う必要があります。
vue.comPonent（ 'Child-Component'、{//正しいスコープテンプレートにあるために動作します： '<div v-show = "somechildproperty"> child </div>'、data：function（）{return {somechildporty：true}}}））同様に、配布コンテンツは親コンポーネントの範囲内でコンパイルされます。
シングルスロット
子コンポーネントのテンプレートに<slot>が含まれていない限り、親コンポーネントの内容は破棄されます。チャイルドコンポーネントテンプレートに特性のないスロットが1つしかない場合、親コンポーネントのコンテンツ全体が挿入され、スロットが挿入されて置き換えられます。
<slot>タグのコンテンツは、ロールバックコンテンツと見なされます。フォールバックコンテンツは、子コンポーネントの範囲内にコンパイルされ、ホスト要素が空で、挿入のコンテンツがないときにフォールバックコンテンツが表示されます。
myコンポーネントコンポーネントには次のテンプレートがあると仮定します。
<div> <h1>これは私のコンポーネントです！</h1> <slot>コンテンツが分散されていない場合、表示されます。 </slot> </div>
親コンポーネントテンプレート：
<マイコンポーネント>
<p>これは元のコンテンツです</p>
<p>これは、よりオリジナルのコンテンツです</p>です
</my-component>
レンダリング結果：
<div> <h1>これは私のコンポーネントです！</h1> <p>これは元のコンテンツです</p> <p>これはもっと元のコンテンツです</p> </div>
名前付きスロット
<slot>要素は、コンテンツを配布する方法を構成するための特別な機能名で構成できます。複数のスロットには異なる名前があります。名前付きスロットは、対応するスロット属性を持つコンテンツフラグメントの要素と一致します。
匿名のスロットがあり、デフォルトのスロットであり、見つからないコンテンツフラグメントを一致させるフォールバックスロットとしてあります。デフォルトのスロットがなければ、これらの比類のないコンテンツフラグメントは破棄されます。
たとえば、次のようなテンプレートを備えたマルチインドションコンポーネントがあるとします。
<div> <slot name = "one"> </slot> <slot> </slot> <slot name = "2"> </slot> </div>
親コンポーネントテンプレート：
<Multi-Insertion> <P slot = "One"> One </p> <p slot = "2"> 2つのデフォルトa </p> </multi-Insertion>
レンダリング結果は次のとおりです。
<div> <p slot = "one"> one </p> <p>デフォルトa </p> <p slot = "2"> 2 </p> </div>
コンテンツ配信APIは、コンポーネントを組み合わせるときに非常に便利なメカニズムです。
動的コンポーネント
複数のコンポーネントが同じマウントポイントを使用してから、それらを動的に切り替えることができます。予約済みの<component>要素を使用して、ISプロパティに動的にバインドします。
new Vue（{el： 'body'、data：{currentView： 'home'}、コンポーネント：{home：{/ * ... */}、posts：{/ */}、archive：{/ * ... */}}）<component：is = "currentView"> <！キープアリブ
切り替えられたコンポーネントがメモリに保持されている場合、保持または再レンダリングすることができます。これを行うには、Keep-Alive Directiveパラメーターを追加できます。
<コンポーネント：is = "currentView" Keep-Alive>
<！ - 非アクティブコンポーネントはキャッシュされます - >
</コンポーネント>
フックをアクティブにします
コンポーネントを切り替える場合、コンポーネントにカットするには、コンポーネントにカットする前に非同期操作が必要になる場合があります。コンポーネントスイッチングの持続時間を制御するには、まとめコンポーネントにアクティブ化フックを追加します。
vue.comPonent（ 'Activate-example'、{activate：function（done）{var self = this loaddataasync（function（data）{self.somedata = data done（）}}}）））Activate Hookは、動的コンポーネントの切り替えまたは静的コンポーネントの初期化レンダリング中にのみ作用し、インスタンスメソッドを使用して手動挿入に作用しないことに注意してください。
トランジションモード
遷移モード機能は、2つの動的コンポーネントの遷移方法を指定するために使用されます。
デフォルトでは、移行をスムーズに入力して出発します。この機能は、他の2つのモードを指定できます。
•in-out：新しいコンポーネントは最初に遷移し、その遷移が完了した後、現在のコンポーネントは遷移します。
•アウトイン：現在のコンポーネントが最初に遷移し、その遷移が完了した後、新しいコンポーネントがプロセスに移行します。
例：
<！ - 最初にフェードアウトしてからフェードアウトしてからフェードイン - > <コンポーネント：is = "view" transition-mode = "transition-mode =" out-in "> </component> .fade-transition {transition：ofacity .3s ease;}。その他
コンポーネントとv-for
カスタムコンポーネントは、通常の要素と同じようにv-forを使用できます。
<my-component v-for = "アイテムのアイテム"> </my-component>
ただし、コンポーネントの範囲が孤立しているため、データをコンポーネントに渡すことはできません。データをコンポーネントに渡すには、プロップを使用する必要があります。
<私のコンポーネント
v-for = "アイテムのアイテム"
：item = "item"
：index = "$ index">
</my-component>
アイテムがコンポーネントに自動的に注入されない理由は、これにより、コンポーネントが現在のv-Forにしっかりと結合されるためです。データがどこから来たのかを明示的に宣言し、コンポーネントのために他の場所で再利用できます。
再利用可能なコンポーネントの書き込み
コンポーネントを作成するときは、コンポーネントを再利用するかどうかを覚えておくことが有益です。使い捨てコンポーネントの他のコンポーネントへの緊密な結合とは何の関係もありませんが、再利用可能なコンポーネントは明確なパブリックインターフェイスを定義する必要があります。
Vue.jsコンポーネントAPIは、プロップ、イベント、スロットの3つの部分から来ています。
•プロップにより、外部環境はデータをコンポーネントに渡すことができます。
•イベントにより、コンポーネントは外部環境でアクションをトリガーできます。
•スロットにより、外部環境はコンテンツをコンポーネントのビュー構造に挿入できます。
v-bindとv-onの略語構文を使用すると、テンプレートのインデントは明確で簡潔です。
<私のコンポーネント
：foo = "baz"
：bar = "qux"
@event-a = "dothis"
@event-b = "dothat">
<！ - content->
<img slot = "icon" src = "...">
<p slot = "main-text"> hello！</p>
</my-component>
非同期成分
大規模なアプリケーションでは、アプリケーションを小片に分割し、必要な場合にのみサーバーからダウンロードする必要がある場合があります。物事を簡単にするために、Vue.jsを使用すると、コンポーネントを工場関数として定義し、コンポーネントの定義を動的に解析できます。 Vue.jsは、コンポーネントをレンダリングする必要がある場合にのみ工場関数をトリガーし、後で再レンダリングするために結果をキャッシュします。例えば：
vue.component（ 'async-example'、function（resolve、requed）{setimeout（）{resolve（{template： '<div> i async！</div>'}}、1000）}））））））工場関数は、サーバーからダウンロードされたコンポーネント定義が受信されたときに呼び出されるResolveコールバックを受信します。また、拒否（理由）を呼び出して、負荷が失敗したことを示すこともできます。ここで、SettimeOutはデモンストレーション専用です。コンポーネントを取得するのは完全にあなた次第です。 Webpackを使用した推奨コードセグメンテーション機能：
vue.component（ 'async-webpack-example'、function（resolve）{//リソース命名規則
コンポーネントやディレクティブなどの一部のリソースは、HTML属性またはHTMLカスタム要素としてテンプレートに表示されます。 HTML属性とタグ名の名前はケースに敏感ではないため、リソースの名前は通常、あまり便利ではないキャメルケースの代わりにケバブケースの形式を使用する必要があります。
Vue.jsは、CamelcaseまたはPascalcaseの形でリソースの名前をサポートし、テンプレート内のKebabケースに自動的に変換します（Propの命名規則に似ています）：
//コンポーネントの定義コンポーネント：{// myComponentをキャメルケースフォームに登録：{/ *... */}} <！ - テンプレートでケバブケース形式を使用 - > <my-component> </my-component> './components/dropdown-menu';Export default {components：{// write <text-box>および<dropdown-menu> textbox、dropdownmenu}}}再帰コンポーネント
コンポーネントは、テンプレート内で再帰的に自分自身を呼び出すことができますが、それには名前オプションがある場合のみです。
var stackoverflow = vue.extend（{name： 'stack-overflow'、テンプレート： '<div>' + //独自の '<stack-overflow> </stack-overflow>' + '</div>'}））上記のコンポーネントは、「最大スタックサイズを超えた」エラーを引き起こすため、再帰コールに終了条件があることを確認してください。 vue.component（）を使用してコンポーネントがグローバルに登録されている場合、コンポーネントIDはコンポーネントの名前オプションに自動的に設定されます。
フラグメントインスタンス
テンプレートオプションを使用する場合、テンプレートの内容はインスタンスのマウント要素を置き換えます。したがって、推奨されるテンプレートのトップレベル要素は、常に単一要素です。
このようなテンプレートを書かないでください：
<div>ルートノード1 </div>
<div>ルートノード2 </div>
これを書くことをお勧めします：
<div>
ルートノードが1つあります！
<div>ノード1 </div>
<div>ノード2 </div>
</div>
次の状況では、インスタンスが断片化されたインスタンスに変わります。
1.テンプレートには、複数のトップレベル要素が含まれています。
2。テンプレートには、通常のテキストのみが含まれています。
3.テンプレートには他のコンポーネントのみが含まれています（他のコンポーネントはフラグメントインスタンスである場合があります）。
4.テンプレートには、Vue-Routerの<Partial>または<Router-View>などの1つの要素指令のみが含まれています。
5.テンプレートルートノードには、V-IFやV-Forなどのプロセス制御命令があります。
これらのケースにより、インスタンスは未知の数のトップレベル要素を持つことができ、DOMコンテンツをフラグメントとして扱います。フラグメントインスタンスは、コンテンツを正しくレンダリングします。ただし、ルートノードはなく、$ elはアンカーノード、つまり空のテキストノード（開発モードのコメントノード）を指します。
しかし、さらに重要なことは、バインディングのルート要素がないため、コンポーネント要素の非プロセス制御命令、非プロップ機能、およびコンポーネント要素の遷移は無視されます。
<！ - いいえ、ルート要素がないため - >
<例v-show = "ok" transition = "Fade"> </example>
<！ - 小道具はい - >
<例：prop = "somedata"> </example>
<！ - プロセス制御は大丈夫ですが、遷移はありません - >
<例v-if = "ok"> </example>
もちろん、フラグメントインスタンスには用途がありますが、通常、コンポーネントにルートノードを与える方が良いです。コンポーネント要素の指示と特別なパフォーマンスが正しく変換され、パフォーマンスもわずかに優れていることが保証されます。
インラインテンプレート
子コンポーネントがインラインテンプレートプロパティを持っている場合、コンポーネントはそのコンテンツをテンプレートとして扱うのではなく、そのテンプレートとして扱います。これにより、テンプレートがより柔軟になります。
<私のコンポーネントインラインテンプレート>
<p>これらは、コンポーネント独自のテンプレートとしてコンパイルされています</p>
<p>親の翻訳コンテンツではありません。</p>
</my-component>
ただし、インラインテンプレートにより、テンプレートの範囲の理解が困難になり、テンプレートのコンパイル結果をキャッシュできません。ベストプラクティスは、テンプレートオプションを使用してコンポーネント内のテンプレートを定義することです。
この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
Vue.jsコンポーネントのチュートリアルについては、特別なトピックVue.jsコンポーネント学習チュートリアルをクリックして学習してください。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。