Vue コンポーネントの高度な使用法

今回は、vue コンポーネントの高度な使い方と応用的な使い方についての注意事項についてお届けします。以下は実際のケースです。

1. 再帰コンポーネント

コンポーネントは、コンポーネントに name オプションを設定するだけで、それ自体を再帰的に呼び出すことができます。

例は次のとおりです:

  <p id="app19">
   <my-component19 :count="1"></my-component19>
  </p>
Vue.component('my-component19',{
 name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件，全局的ID会被自动设置为组件的name。
 props: {
  count: {
   type: Number,
   default: 1
  }
 },
 template: '<p><my-component19 :count="count+1" v-if="count<3"></my-component19></p>'
});
var app19 = new Vue({
 el: '#app19'
});

レンダリング結果は次のとおりです:

 <p id="app19">
  <p>
   <p>
    <p><!----></p>
   </p>
  </p>
 </p>

名前を設定した後、コンポーネントテンプレート内で再帰的に使用できます。ただし、数を制限するには条件を与える必要があることに注意してください。そうしないと、エラーがスローされます: 最大スタック サイズを超えました。

コンポーネントの再帰的使用は、カスケードセレクターやツリー状のコントロールなど、未知の階層関係を持ついくつかの独立したコンポーネントを開発するために使用できます。

2. インラインテンプレート

コンポーネントのテンプレートは、通常、コンポーネントのラベルにインラインテンプレート機能を提供します。は、コンテンツをコンテンツとして配布するのではなく、テンプレートとして扱います。これにより、テンプレートがより柔軟になります。

例:

例は次のとおりです:

<p id="app20">
   <my-component20 inline-template>
    <p>
     <h3>在父组件中定义子组件的模板</h3>
     <p>{{msg}}</p>
    </p>
   </my-component20>
  </p>
Vue.component('my-component20',{
 data: function(){
  return {
   msg: '在子组件声明的数据'
  }
 }
});
var app20 = new Vue({
 el: '#app20'
});

4. 非同期コンポーネント

プロジェクトが十分に大きく、十分なコンポーネントを使用する場合は、すべてのコンポーネントをロードするだけでは十分ではないため、パフォーマンスの問題を考慮する必要があります。初めに必要な経費。

幸いなことに、Vue.js を使用すると、コンポーネントをファクトリ関数として定義し、コンポーネントを動的に解析できます。 Vue: コンポーネントをレンダリングする必要がある場合にのみファクトリ関数をトリガーし、その後の再レンダリングのために結果をキャッシュします。

<p id="app21">
   <component :is="currentView"></component>
   <button @click="changeView(&#39;A&#39;)">切换到A</button>
   <button @click="changeView(&#39;B&#39;)">切换到B</button>
   <button @click="changeView(&#39;C&#39;)">切换到C</button>
  </p>
var app21 = new Vue({
 el: '#app21',
 data: {
  currentView: 'comA'
 },
 methods: {
  changeView: function(data){
   this.currentView = 'com'+ data　　//动态地改变currentView的值就可以动态挂载组件了。
  }
 },
 components: {
  comA: {
   template: '<p>组件A</p>'
  },
  comB: {
   template: '<p>组件B</p>'
  },
  comC: {
   template: '<p>组件C</p>'
  }
 }
});

ファクトリ関数は、サーバーからダウンロードされたコンポーネント定義を受信するときに呼び出される解決コールバックを受け取ります。また、reject(reason) を呼び出して、読み込みの失敗を示すこともできます。 ここでの setTimeout は、非同期性を示すためのものです。たとえば、コンポーネント設定を object 設定として記述し、Ajax を通じてリクエストしてから、resolve を呼び出して設定オプションを渡します。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

カスタム ライブラリを開発する方法

JS を使用して再計算のために複数の配列をマージする方法

以上がVue コンポーネントの高度な使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。