実際のプロジェクトで 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 は、非同期性を示すためのものです。たとえば、コンポーネント構成をオブジェクト構成として記述し、Ajax 経由でリクエストしてから、resolve を呼び出して構成オプションを渡します。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vueのループトラバーサル命令とは何ですか

Angularデータバインディングメカニズムの使用方法

以上が実際のプロジェクトで vue コンポーネントを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。