コンポーネントとは：コンポーネントは、vue.jsの最も強力な機能の1つです。コンポーネントは、HTML要素を拡張し、再利用可能なコードをカプセル化できます。より高いレベルでは、コンポーネントはカスタム要素であり、Vue.jsのコンパイラは特別な機能を追加します。場合によっては、コンポーネントは、IS機能とともに拡張されたネイティブHTML要素の形式でもあります。
コンポーネントを登録する方法は？
Vue.Extendメソッドを使用してコンポーネントを作成し、Vue.comPonentメソッドを使用してコンポーネントを登録する必要があります。 vue.extendメソッドの形式は次のとおりです。
var mycomponent = vue.extend（{// options ...後で紹介します}）他の場所でこの作成されたコンポーネントを使用したい場合は、名前を付ける必要があります。
vue.component（ 'my-component'、myComponent）
名前を付けた後、DOM要素を使用するのと同じように、このコンポーネント名をHTMLタグで使用できます。コンポーネントの登録と使用法の完全な例を見てみましょう。
HTMLコード：
<div id = "example"> <my-component> </my-component> </div>
JSコード：
// var myComponent = vue.extend（{empplate： '<div> a custom Component！</div>'}）//登録vue.component（ 'my-component'、mycomponent）// root instance new vue（{el： '#example'}を作成する出力結果：
<div id = "example"> <div>カスタムコンポーネント！</div> </div
ネストされたコンポーネント
コンポーネント自体には、コンポーネントを含めることもできます。次の親コンポーネントには、子どものコンポーネントという名前のコンポーネントが含まれていますが、このコンポーネントは親コンポーネントでのみ使用できます。
var child = vue.extend（{template： '<div> a custom component！</div>'}）; var parent = vue.extend（{div>親コンポーネント> </div> '、コンポーネント：{' child-component '：child}上記の定義プロセスは非常に面倒であり、Vue.comPonentとVue.Extendメソッドを毎回呼び出す必要はありません。
// Vue.comPonent（ 'my-component'、{template： '<div> a custom Component！</div>'}）//これは、ローカル登録var parent = vue.extend：{'my-component'：{{{my-componte： '<div> a custom component！動的コンポーネント
複数のコンポーネントが同じマウントポイントを使用してから、それらを動的に切り替えることができます。予約済みの<component>要素を使用して、ISプロパティに動的にバインドします。以下の列には、同じVueインスタンスの下にインストールされた3つのコンポーネント、投稿、およびアーカイブがあり、CurrentView機能を介してコンポーネントディスプレイを動的に切り替えます。
HTMLコード：
<div id = "dynamic"> <button id = "home"> home </button> <button id = "posts"> posts </button> <button id = "archive"> archive </button> <br> <component：is = "currentView"> </component> </div>
JSコード：
var vue = new vue（{el： "＃dynamic"、data：{currentView： "home"}、components：{home：{template： "home"}、posts：{template： "posts"}、archive：{template： "archive"}}}}） "home";}; document.getElementById（ "posts"）コンポーネントとv-for
<my-component v-for = "アイテムのアイテム"> </my-component>
コンポーネントの範囲が独立しているため、データをコンポーネントに渡すことはできません。データをコンポーネントに渡すには、プロップを使用する必要があります。
<私のコンポーネント
v-for = "アイテムのアイテム"
：item = "item"
：index = "$ index">
</my-component>
アイテムがコンポーネントに自動的に注入されない理由は、これにより、コンポーネントが現在のv-Forにしっかりと結合されるためです。データがどこから来たのかを明示的に宣言し、コンポーネントのために他の場所で再利用できます。
詳細な応答原則
コンポーネントがデータをバインドすると、バインディングはどのように効果的になり、属性を動的に変更および追加できますか？次の原則の紹介をご覧ください。
変更を追跡する方法：データのオプションとして別のオブジェクトをVUEインスタンスに渡すと、Vue.jsはそのプロパティを通過し、Object.definePropertyを使用してGetter/Setterに変換します。これはES5機能であり、すべてのvue.jsはIE8以下をサポートしていません。
テンプレート内の各命令/データバインディングには、対応するウォッチャーオブジェクトがあり、計算プロセス中の属性を依存関係として記録します。その後、依存するセッターが呼び出されると、ウォッチャーの再計算がトリガーされます。プロセスは次のとおりです。
検出問題の変更：VUE.JSは、オブジェクトプロパティの追加または削除を検出できません。 Vue.jsがそれをGetter/Setterモードに変換できるようにするために、プロパティがデータ上にある必要があります。例えば：
var data = {a：1}; var vm = new vue（{data：data}）; // `vm.a`および` data.a`はレスポンシブになりました。ただし、インスタンス作成後に属性を追加し、それに対応する方法があります。セット（key、value）インスタンスメソッドを使用できます。
VM。 set（ 'b'、2）
// `vm.b`および` data.b`が応答します
通常のオブジェクトの場合、グローバルな方法を使用できます。vue.set（object、key、value）：
vue.set（data、 'c'、3）
// `vm.c`および` data.c`が応答します
データの初期化：Vue.jsは対応するプロパティの動的な追加を提供しますが、データオブジェクト上のすべての対応するプロパティを宣言することをお勧めします。
これをしないでください：
var vm = new vue（{template： '<div> {msg}} </div>'}）//これは行う必要があります：
var vm = new vue（{data：{// declare `msg`msg： ''}、template： '<div> {{msg}} </div>'}）//その後、` msg`vm.msg = 'hello！'コンポーネントの完全なケース
以下に導入された例は、モーダルウィンドウ関数を実装し、コードは比較的簡単です。
HTMLコード：
<！ - テンプレートを定義するスクリプトを実装します - > <スクリプトタイプ= "x/テンプレート" id = "modal-template"> <！ - v-show = "show"を介してテンプレートが表示されます。 name = "header">デフォルトヘッダー</slot> </div> <div> <！ - スロットはボディプレースホルダーに相当します - > <スロット名= "ボディ">デフォルトボディ</slot> </div> <div> <！ - スロットはフッタープレースホルダーに相当します - > <スロットname = "footer </slot </spot> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </script> <div id = "app"> <！ - ボタンをクリックするときにvueインスタンス属性を設定します。 showmodalの値はtrue-> <button id = "show-modal" @click = "showmodal = true"> show modal </button> <！ - モーダルはカスタムプラグインです。プラグインの機能は、Vueインスタンスのショーモーダル機能にバインドされます - > <モーダル：show.sync = "showmodal"> <！ - モーダルプラグインのスロットのコンテンツを置き換えてから、ヘッダー - > <h3スロット= "ヘッダー">カスタムヘッダー</h3> </modal> </div>
JSコード：
//Define a plug-in with the name modalVue.component("modal", { //The template of the plug-in is bound to the content of the DOM element with the id of modal-template template: "#modal-template", props: { //The type is boolean show:{ type: Boolean, required: true, twoWay: true } }}); // instantiate vue、スコープはアプリ要素のIDの下にありますnew vue（{el： "＃app"、data：{//デフォルト値はfalse showmodal：false}}）;CSSコード：
.modal-mask {position：sixt; Z-Index：9998;上：0;左：0;幅：100％;高さ：100％;背景色：RGBA（0、0、0、.5）;表示：テーブル;トランジション：不透明度.3S容易さ;}。モーダルワッパー{display：table-cell;垂直align：middle;}。modal-container {width：300px;マージン：0px auto;パディング：20px 30px;バックグラウンドカラー：#fff;ボーダーラジウス：2px; Box-Shadow：0 2PX 8PX RGBA（0、0、0、.33）;遷移：すべての.3S容易さ。 Font-Family：Helvetica、Arial、Sans-Serif;}。モーダルヘッダーH3 {マージントップ：0;色：＃42b983;}。モーダルボディ{マージン：20px 0;}。モーダルデフォーボタン{float：right;}/**次のスタイルは* v-transition = "modal"がvue.jsによって視認性が切り取られている場合、* v-transition = "modal"を備えた要素に自動化されます。スタイル。*/。モーダルエンテル、.modal-leave {opacity：0;}。モーダルエンテル.modal-container、.modal-leave .modal-container {-webkit-transform：スケール（1.1）;変換：スケール（1.1）;}この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
Vue.jsコンポーネントのチュートリアルについては、特別なトピックVue.jsコンポーネント学習チュートリアルをクリックして学習してください。
プロジェクトでコンポーネントの機能を深く使用していないため、コンポーネントを深く理解していません。紹介は比較的表面的です。読んでくれてありがとう。