Vue.js第9課コンポーネント

5546 ワード
php
コンポーネント(Component)はVue.jsの最も強力な機能の一つです.
コンポーネントはHTML要素を拡張し、再利用可能なコードをカプセル化することができます.
コンポーネントシステムは、独立した多重化可能な小さなコンポーネントで大規模なアプリケーションを構築することができ、ほとんどのアプリケーションのインタフェースはコンポーネントツリーとして抽象化することができます.
グローバルグループ構文フォーマットを登録するには、次のようにします.
Vue.component(tagName, options)
tagNameはコンポーネント名、optionsは構成オプションです.登録後、コンポーネントを呼び出すには、次の方法を使用します.
グローバルコンポーネント
すべてのインスタンスでグローバルコンポーネントが使用できます.グローバルコンポーネントインスタンス
単純なグローバルコンポーネントrunoobを登録し、使用します.

<br>//登録<br>Vue.component('runoob',{<br>template:'<h 1>カスタムコンポーネント!</h 1>'<br>})<br>//ルートインスタンス<を作成します.br>new Vue({<br> el: '#app'<br>})<br>
ローカルコンポーネント
インスタンスオプションにローカルコンポーネントを登録することもできます.これにより、コンポーネントはこのインスタンスでのみ使用できます.ローカルコンポーネントインスタンス
単純なローカルコンポーネントrunoobを登録し、使用します.

<br>var Child={<br>template:'<h 1>カスタムコンポーネント!</h 1>'<br>}</p>
<p>//ルートインスタンス<を作成します.br>new Vue({<br> el: '#app',<br> components: {</p>
<pre><code>//<runoob> 親テンプレートでのみ使用可能
'runoob': Child</code></pre>
<p>}<br>})<br>
Prop
propは、親コンポーネントがデータを渡すためのカスタム属性です.
親コンポーネントのデータはpropsでサブコンポーネントにデータを渡す必要があります.サブコンポーネントはpropsオプションで「prop」:Propインスタンスを明示的に宣言する必要があります.

<br>//登録<br>Vue.component('child',{<br>//props<br>props:['message'],<br>//同様にvmインスタンスで「this.message」のように<br>template:'<span>{{message}</span>'<'&br>})<br>//ルートインスタンス<を作成します.br>new Vue({<br> el: '#app'<br>})<br>
ダイナミックProp
HTMLプロパティをv-bindで1つの式にバインドするのと同様に、propsの値を親コンポーネントのデータにv-bindで動的にバインドすることもできます.親コンポーネントのデータが変化するたびに、この変化はサブコンポーネント:Propインスタンスにも伝わります.

<br>//登録<br>Vue.component('child',{<br>//props<br>props:['message'],<br>//同様にvmインスタンスで「this.message」のように<br>template:'<span>{{message}</span>'<'&br>})<br>//ルートインスタンス<を作成します.br>new Vue({<br> el: '#app',<br> data: {</p>
<pre><code>parentMsg:'親コンポーネントの内容'</code></pre>
<p>}<br>})<br>
次の例では、v-bind命令を各重複コンポーネントにtodoを転送します.Propインスタンス

<br>Vue.component('todo-item', {<br> props: ['todo'],<br> template: '<li>{{ todo.text }}</li>'<br>})<br>new Vue({<br> el: '#app',<br> data: {</p>
<pre><code>sites: [
{ text: 'Runoob' },
{ text: 'Google' },
{ text: 'Taobao' }
]</code></pre>
<p>}<br>})<br>
注意:propは一方向バインドされています.親コンポーネントのプロパティが変化すると、サブコンポーネントに伝達されますが、逆にはなりません.Prop検証
コンポーネントはpropsの検証要件を指定できます.
Propが文字列配列ではなくオブジェクトである場合、検証要件が含まれます.
Vue.component('example', { props: { 
//        （`null`           ）
propA: Number,
//     
propB: [String, Number],
//        
propC: {
  type: String,
  required: true
},
//   ，    
propD: {
  type: Number,
  default: 100
},
//   ／                 
propE: {
  type: Object,
  default: function () {
    return { message: 'hello' }
  }
},
//        
propF: {
  validator: function (value) {
    return value > 10
  }
}

}})
typeは、次のプロトタイプコンストラクタであってもよい.
String
Number
Boolean
Function
Object
Array

typeは、instanceof検出を使用してカスタムコンストラクタであってもよい.カスタムイベント
親コンポーネントはpropsを使用してサブコンポーネントにデータを渡しますが、サブコンポーネントがデータを返す場合は、カスタムイベントを使用する必要があります.
v-onを使用してカスタムイベントをバインドできます.Vueインスタンスごとにイベントインタフェース(Events interface)が実装されます.すなわち、次のようになります.
   $on(eventName)     
   $emit(eventName)

さらに、親コンポーネントは、サブコンポーネントを使用する場所で直接v-onを使用して、サブコンポーネントがトリガーしたイベントを傍受することができる.
以下の例の中性子コンポーネントは、その外部と完全にデカップリングされている.親コンポーネントが関心を持つ内部イベントをトリガーするだけです.≪インスタンス｜Instance｜emdw≫

  
{{ total }}

<br>Vue.component('button-counter', {<br> template: '<button v-on:click="increment">{{ counter }}</button>',<br> data: function () {</p>
<pre><code>return {
counter: 0
}</code></pre>
<p>},<br> methods: {</p>
<pre><code>increment: function () {
this.counter += 1
this.$emit('increment')
}</code></pre>
<p>},<br>})<br>new Vue({<br> el: '#counter-event-example',<br> data: {</p>
<pre><code>total: 0</code></pre>
<p>},<br> methods: {</p>
<pre><code>incrementTotal: function () {
this.total += 1
}</code></pre>
<p>}<br>})<br>
コンポーネントのルート要素で元のイベントをリスニングしたい場合は、使用できます.native修飾v-on.例:
コールスタック・サイズの最大は? どこまで関数は深く呼び出せるのか? (JavaScript)
RabbitMQメッセージキューのPHPでの応用