この記事では、より詳細なコードをコンパイルするための公式ドキュメントを参照し、初心者が読んで学習するためのより安全なチュートリアルです。
この記事は公式の文書からのものです。
http://cn.vuejs.org/guide/components.html
コンポーネントとは何ですか？
コンポーネントは、vue.jsの最も強力な機能の1つです。コンポーネントは、HTML要素を拡張し、再利用可能なコードをカプセル化できます。より高いレベルでは、コンポーネントはカスタム要素であり、Vue.jsのコンパイラは特別な機能を追加します。場合によっては、コンポーネントは、IS機能とともに拡張されたネイティブHTML要素の形式でもあります。
コンポーネント定義
componentコンポーネントの関数：
【1はHTML要素を拡張し、再利用可能なコードをカプセル化します。
【2】コンポーネントはカスタム要素であり、Vuejsのコンパイラは特別な機能を追加できます。
【3】場合、コンポーネントはネイティブHTML要素の形で、ISのような方法で拡張できます。
smand標準コンポーネントを書きます：
次の手順に分かれています。
[1]コンポーネントが取り付けられている場所は、VUEインスタンスによってレンダリングされるHTML要素である必要があります。具体的には、たとえば、<div id =” app”> </div>上記とその子ノードなどのHTML要素。
【2】コンポーネントを定義し、使用します
var variable name = vue.extend（{Template： "以下はHTMLのテンプレートコンテンツです}）は、「var btn = vue.extend（{template：" <button>これがボタン）</button> "}）の形式で作成されます。【3 defoned定義されたコンポーネントをVUEインスタンスに登録します。これにより、指定されたタグをコンポーネントのコンテンツに置き換えることができます。
コードとして：
//彼をvue.comPonent（ "add-button"、btn）に登録します。
具体的には、次の各タグ（Vueのルートインスタンスの範囲内）
<アドバットン> </add-button>
そうなるでしょう
<ボタン>これはボタン</button>です
交換。
[4]上記の方法はグローバル登録です（各Vueインスタンスの追加ボタンタグは、定義するものに置き換えられます）。
解決策はローカル登録です。
たとえば、コード：（これはテンプレート属性が設定されています。この属性が使用できない場合、<div id = "app"> </div>タグに<add-button> </add-button>タグを配置することもできます。
<div id = "app"> </div> <scrip> //コンポーネントを定義するvar btn = vue.extend（{template： "<butth>これはボタン</button>"}）vue.component（ "add-button"、btn）; //ルートインスタンスを作成します。つまり、このルートでvueを有効にしますvar vm = new vue（{el： '＃app'、テンプレート： "<add-button> </add-button>"}）; </script>③ローカル登録コンポーネント：
簡単に言えば、このVueインスタンスにのみ有効になります。特定の方法は、登録ステップをスキップすることです。
次に、Vueインスタンスを宣言すると、コンポーネントプロパティに追加されます（これはオブジェクトであり、KV形式に配置されています）（この単語にはもう1つのsがあることに注意してください）
コードとして：
<div id = "app"> </div> <script> //コンポーネントのvar btn = vue.extend（{template： "<butth>これはボタンです</button>"}）//ルートインスタンスを作成します。 "add-button"：btn}}）; </script>注記：
公式のチュートリアルによると、この方法（ローカル登録を参照）は、ディレクティブ、フィルター、遷移などの他のリソースにも適用できます。
Simplifyステップ：
【1 componentコンポーネントの定義とコンポーネントの登録は、1つのステップで完了します。
//コンポーネントvue.componentを定義する（ "add-button"、{template： "<butth>これはボタン</button>"}）;【2docal現地登録中、定義と登録ステップが完了します。
//ルートインスタンスを作成します。つまり、このルートでvueを有効にしますvar vm = new vue（{el： '＃app'、template： "<add-button> </add-button>"、components：{"add-button"：{"add-button：" <<ボタン>これはボタンです</button>}}）;data属性
コンポーネントにデータ属性を直接追加することはできません（無効）。
その理由は、これが行われた場合、コンポーネントのデータ属性がオブジェクトである可能性があり、このオブジェクトは外部で渡される可能性があるため（たとえば、最初にオブジェクトを宣言し、次にオブジェクトはデータの値です）、コンポーネントのすべてのコピーがオブジェクトを共有する可能性があります（外部から渡されるもの）。
したがって、データ属性は関数である必要があり、その後、データ属性の値である返品値があります。
そして、この戻り値は、まったく新しいオブジェクトである必要があります（つまり、ディープコピー、オブジェクトを共有する複数のコンポーネントを避けます）。
コードとして：
var vm = new vue（{el： '＃app'、テンプレート： "<add-button> </add-button>"、components：{"add-button"：{add-button "：{template：" <button>これはボタンです{{btn}}} </button> "、data：function（）{btn：" 123 ";また、これが当てはまる場合、BTNの値は同じです（実際にオブジェクトを共有するため）
<div id = "app"> </div> <div id = "app2"> </div> <script> var obj = {btn： "123"}; var vm = new vue（{el： '＃app'、テンプレート： "<add-button> </add-button>"、components：{"add-button"：{template： "<button>これはボタンです{{btn}}} </button> obj.btn = "456"; var vm2 = new vue（{el： '＃app2'、テンプレート： "<add-button> </add-button>"、components：{"add-button"：{add-button "：{template：" <button>これはボタンです{{btn}} </button> "、data function </script>注記：
el属性がvue.extend（）で使用される場合、それも関数である必要があります。
特徴：
[1]公式チュートリアルによると、一部のHTML要素には、どの要素を配置できるかについて制限があります。
しかし、実際、私は自分のテストに問題が見つかりませんでしたので、わかりません。
【2】URLを教えてください。本当に何かが起こったら、私はそれを勉強します。
http://cn.vuejs.org/guide/components.html#u6a21_u677f_u89e3_u6790
上記は、紹介されたvuejsの第8章のVuejsコンポーネントの定義の例の例です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！