基本的なコンポーネント

基本的な例

ここでのVueコンポーネントの例です。

// ボタンカウンタと呼ばれる新しいコンポーネント定義 
Vue.component（ 'ボタンカウンタを' 、{ 
  データ：関数（）{ 
    リターン{ 
      COUNT： 0 
    } 
  }、
  テンプレート：「<ボタンON-V：クリック=「COUNT ++ 「>私は、あなたがクリックした{{COUNT}}タイムズ。</ボタン> ' 
}）

例Vueのコンポーネントは再利用可能であり、かつ名前を持っています。この例では<button-counter>。私たちは、渡すことができnew Vue、このコンポーネントは、カスタム要素として使用され、Vueのは、作成したルート・インスタンスを：

<DIV ID = "コンポーネント・デモ"> 
  <ボタンカウンタ> </ボタンカウンタ> 
</ div>

新しいヴュー（{： '＃コンポーネント-デモ'}）

コンポーネントなのでVueの例は、多重化され、そして、それらはnew Vue例えば、同じオプションを受け取りdata、computed、watch、methodsなどのライフサイクルフックと。唯一の例外は次のようであるel。このルートインスタンス固有のオプション。

再利用可能なコンポーネント

あなたは、リユース部品の任意の数とすることができます。

<DIV ID = "コンポーネント・デモ"> 
  <ボタンカウンタ> </ボタンカウンタ> 
  <ボタンカウンタ> </ボタンカウンタ> 
  <ボタンカウンタ> </ボタンカウンタ> 
</ div>

あなたがボタンをクリックすると、各コンポーネントが独立して維持されることに注意してくださいcount。あなたはすべてのコンポーネントを使用したら、それは新しい持つことになりますので、インスタンスが作成されます。

1.dataは関数でなければなりません

我々が定義する際に<button-counter>コンポーネントを、あなたはそれがあります見つけることができdata、直接オブジェクトのようではありません。

データ：{ 
  数： 0 
}

代わりに、成分dataのオプションは関数でなければならないので、各インスタンスは、オブジェクトの別のコピーが返され維持することができます。

データ：関数（）{
   リターン{ 
    数： 0 
  } 
}

組織の構成要素

アプリケーションは通常、ネストされたアセンブリに組織ツリーの形式になります。

コンポーネントツリー

たとえば、コンポーネントヘッダ、サイドバー、コンテンツ領域を有することができるというように、各成分は、ナビゲーションリンク、ボーエン成分等のような他を含んでいます。

テンプレートを使用するためには、これらのコンポーネントは、Vueのを識別することができるようにするために登録する必要があります。：登録のタイプの2つのコンポーネントがあり、登録グローバルとローカルに登録を。この時点で、我々はを通じてコンポーネントだけですVue.componentグローバル登録：

Vue.component（ '私の-コンポーネント名' 、{
   // ...オプション... 
}）

成分グローバル登録は、その（によって登録された後のいずれかで使用することができるnew Vueルート・インスタンスヴュー）新しく作成されたテンプレートは、ツリー内のそのコンポーネントのすべてのサブコンポーネントを含みます。

プロップによってサブアセンブリにデータを送信します

あなたがコンポーネント上のいくつかのカスタム属性を登録することができプロップ。値はプロパティの支柱属性に渡されたときには、コンポーネントのインスタンスとなります。ブログのコンポーネントにタイトルをお届けするために、我々は使用することができるprops許容可能な小道具でのコンポーネントのリストに含まれるオプションを：

Vue.component（ 'ブログポスト' 、{ 
  小道具：[ 'タイトル' ]、
  テンプレート： '<H3> {{タイトル}} </ H3>' 
}）

デフォルトのコンポーネントは、任意の値が任意の小道具に渡すことができ、支柱の任意の数を有することができます。テンプレートでは、あなたは私たちが、この値はコンポーネントのインスタンスにアクセスするだけでアクセスできるようにしていることがわかりますdata同じの値を。

カスタム属性データが渡さとして登録する小道具た後、あなたはこのようなものを置くことができます。

<ブログ記事タイトル=「Vueのと私の旅」> </ブログポスト> 
<ブログ記事タイトル=「Vueの持つブログは」> </ブログポスト> 
<ブログ記事タイトル=「なぜVueのが楽しいようです」 > </ブログポスト>

しかし、一般的なアプリケーションでは、あなたはボーエン内のデータの配列を持っているかもしれません。

新しいヴュー（{ 
  エル： '＃はブログポストデモ'は、
  データ：{ 
    記事：[ 
      {ID： 1、タイトル： 'Vueのと私の旅' }、
      {ID： 2、タイトル： 'ヴューとブログ' }、
      {ID： 3、タイトル： 'なぜヴューが楽しいようです' } 
    ] 
  } 
}）

そして、いずれかのポストにコンポーネントをレンダリングします：

<blog- ポスト
  V - のために = "ポストの記事では、" 
  V -bind：キー= "post.id" 
  V -bind：タイトル= "post.titleを" 
> </ブログポスト>

上に示したように、あなたは私たちが使用できることがわかりますv-bind動的に小道具を提供します。これにより、たとえば、レンダリングしたい具体的な内容を知りませ始まりですリストを取得するために、ブログのAPIから、それは非常に便利であるときに。

単一のルート要素

構築する際<blog-post>の成分を、何のテンプレートは、あなたは最終的にタイトルよりもはるかに含まれています：

<H3> {{タイトル}} </ H3>

非常に少なくとも、あなたはこの記事の本文に含まれます：

<H3> {{タイトル}} </ H3> 
<DIV V-HTML = "コンテンツ"> </ div>

テンプレートに書いてみる場合は、Vueがエラーを表示し、ことを説明するすべてのコンポーネントを単一のルート要素を持っている必要があります（各コンポーネントは唯一のルート要素を持っている必要があります）。次の例のように、この問題を解決するために、親要素の中にテンプレートの内容をラップすることができます。

<DIV クラス = "ブログポスト"> 
  <H3> {{タイトル}} </ H3> 
  <DIV V-HTML = "コンテンツ"> </ div> 
</ div>

コンポーネントがより複雑になったとき、我々は唯一のポストのタイトルと内容が、また、リリース日、コメントをブログなど必要はありません見て。に関連する各定義については、非常に煩雑になる小道具。

<blog- ポスト
  V - のために = "ポストの記事では、" 
  V -bind：キー= "post.id" 
  V -bind：タイトル= "post.titleを" 
  V -bind：コンテンツ= "post.content" 
  V -bind： publishedAt = "post.publishedAt" 
  V -bind：コメント= "post.comments" 
> </ブログポスト>

リファクタリングすることの時間だから、<blog-post>アセンブリを、そしてそれは、単一の受け入れになってみましょうpost小道具は：

<blog- ポスト
  V - のために = "ポストの記事では、" 
  V -bind：キー= "post.id" 
  V -bind：ポスト= "POST" 
> </ブログポスト>

Vue.component（ 'ブログポスト' 、{ 
  小道具：[ 'ポスト' ]、
  テンプレート： `
     <DIV クラス = "ブログポスト"> 
      <H3> {{post.titleを}} </ H3> 
      <DIV V- HTML = "post.content"> </ div> 
    </ div> 
  ' 
}）

さて、関係なく、するときのpostオブジェクトの新しいプロパティを追加し、それが自動的になります<blog-post>利用可能。

モニタサブコンポーネントのイベント

当社の開発では<blog-post>コンポーネント、その機能のいくつかは、通信し、親コンポーネントために私たちを必要とするかもしれません。たとえば、私たちは、ページの残りの部分は、デフォルトのフォントサイズを維持可能にしながら、ボーエンの大きさに拡大する補助機能を導入することができます。

親コンポーネントでは、我々は1を追加することができpostFontSize、この機能のデータ属性をサポートします：

新しいヴュー（{ 
  エル： '＃ブログの記事・イベント・デモ' 、
  データ：{ 
    記事：[ / * ... * / ]、
    postFontSize： 1 
  } 
}）

テンプレート内のすべてのボーエンのフォントサイズを制御するために使用することができます。

<DIV ID = "ブログの記事・イベント・デモ"> 
  <DIV：スタイル= "{のfontSize：postFontSize + '日'}"> 
    <blog- 後の
      V - のために = "ポストの記事で、" 
      V：キー= -bind "post.id" 
      V -bind：ポスト= "POST" 
    > </ブログポスト> 
  </ div> 
</ div>

今、私たちは、フォントサイズを大きくするために、任意のポストテキストの前にボタンを追加します。

Vue.component（ 'ブログポスト' 、{ 
  小道具：[ 'ポスト' ]、
  テンプレート： `
     <DIV クラス = "ブログポスト"> 
      <H3> {{post.titleを}} </ H3> 
      <ボタン> 
        拡大テキスト
       </ボタン> 
      <DIV V-HTML = "post.content"> </ div> 
    </ div> 
  ' 
}）

問題は、このボタンは何もしないということです。

<ボタン> 
  拡大テキスト
 </ボタン>

あなたは、このボタンをクリックすると、我々はすべてのコンポーネントがボーエンテキストをズームの親に伝える必要があります。幸いなことに、例Vueがこの問題を解決するためのカスタムシステムイベントを提供しています。親コンポーネントは、によって同じようなネイティブDOMイベントを処理することができます v-on 任意のイベントリスナーサブコンポーネントインスタンス：

<blog- ポスト
  ... 
  V -on：拡大テキスト= "postFontSize + = 0.1" 
> </ブログポスト>

一方でサブアセンブリを呼び出すことによって内蔵された $emit方法でイベントをトリガし、イベントの名前で渡すこと：

<ボタンVオン：クリック= "$ EMIT（ '-テキストを拡大'）"> 
  拡大テキスト
 </ボタン>

これにより v-on:enlarge-text="postFontSize += 0.1" 、リスナー、親コンポーネントがイベントを受信して更新する postFontSize 値を。

1.値のスローイベント

時には、特定の値をスローするイベントと、それは非常に便利です。例えば、我々はよいでしょう<blog-post>アセンブリがそのテキストを拡大するどのくらいかを決定します。次に、あなたが使用することができます$emit提供するために、二番目のパラメータ値を：

<ボタンVオン：クリック= "$ EMIT（ '-テキストを拡大'、0.1）"> 
  拡大テキスト
 </ボタン>

親コンポーネントでこのイベントを聴いたときに続いて、我々は渡すことができます $event アクセスは、この値をスローするように：

<blog- ポスト
  ... 
  V -on：拡大テキスト= "postFontSize + = $イベント" 
> </ブログポスト>

それとも、これは、イベントハンドラメソッドの場合：

<blog- ポスト
  ... 
  V -on：拡大テキスト= "onEnlargeText" 
> </ブログポスト>

そして、この値は、このメソッドの最初の引数として渡されます。

方法：{ 
  onEnlargeText：関数（enlargeAmount）{ 
    この .postFontSize + = enlargeAmount 
  } 
}

アセンブリ2. Vモデル

カスタムイベントもVモデルのサポートのカスタム入力コンポーネントを作成するために使用することができます。覚えておいてください：

<入力V-モデル= "検索テキスト">

それはと同等です。

< 入力
  V -bind：値= "検索テキスト" 
  V -on：入力= "検索テキスト= $ event.target.value" 
>

アセンブリ、Vモデルで使用される場合、これは次のようになります。

<特注入力
  V -bind：値= "検索テキスト" 
  のV -on：入力= "検索テキスト= $イベント" 
> </カスタム入力>

このコンポーネントの中、それを動作させるために<input>必要があります。

value属性名にバインドされたvalue小道具に
その中でinputイベントがトリガされ、カスタムによる新たな価値inputのイベントがスローされました

コードは次のように書き込まれた後：

Vue.component（ 'カスタム入力' 、{ 
  小道具：[ '値' ]、
  テンプレート： `
     < 入力
      V -bind：値= "値" 
      Vの -on：入力=" $ EMIT（ '入力'、$イベント。 target.value）」
    > 
  ` 
}）

今、Vモデルは、このコンポーネントで完璧に動作することができる必要があります：

<カスタム入力Vモデル=「検索テキスト」> </カスタム入力>

ヴュー（IX）