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

5546 ワード

php

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

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

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

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

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

Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) new Vue({ el: '#app', data: {
<pre><code>sites: [
{ text: 'Runoob' },
{ text: 'Google' },
{ text: 'Taobao' }
]</code></pre>
} }) 
注意: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 }}

Vue.component('button-counter', { template: '<button v-on:click="increment">{{ counter }}</button>', data: function () {
<pre><code>return {
counter: 0
}</code></pre>
}, methods: {
<pre><code>increment: function () {
this.counter += 1
this.$emit('increment')
}</code></pre>
}, }) new Vue({ el: '#counter-event-example', data: {
<pre><code>total: 0</code></pre>
}, methods: {
<pre><code>incrementTotal: function () {
this.total += 1
}</code></pre>
} }) 
コンポーネントのルート要素で元のイベントをリスニングしたい場合は、使用できます.native修飾v-on.例:

コールスタック・サイズの最大は? どこまで関数は深く呼び出せるのか? (JavaScript)

RabbitMQメッセージキューのPHPでの応用