vue コンポーネントを使用するための実践的な手順

今回は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 サイトの他の関連記事に注目してください。

推奨読書:

複数の配列を結合するときに重複データを削除する方法

アップロードされた画像のタイプとサイズを決定するために必要な手順

以上がvue コンポーネントを使用するための実践的な手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。