vueコンポーネントと再利用の詳細な説明

コンポーネントは、Vue.js の最も強力な機能の 1 つです。コンポーネントは HTML 要素を拡張し、再利用可能なコードをカプセル化できます。この記事では主に vue コンポーネントと再利用について紹介します。必要な友人は参照してください

1. コンポーネントとは

コンポーネント (コンポーネント) は、Vue.js の最も強力な機能の 1 つです。コンポーネントは HTML 要素を拡張し、再利用可能なコードをカプセル化できます。

2. コンポーネントの使用法

コンポーネントを使用するには、登録する必要があります。グローバル登録とローカル登録の 2 つの方法があります。

2.1 グローバル登録後は、任意の V ue インスタンスを使用できるようになります。例:

 <p id="app1">
      <my-component></my-component>
    </p>
Vue.component(&#39;my-component&#39;,{
  template: &#39;<p>这里是组件的内容</p>&#39;
});
var app1 = new Vue({
  el: &#39;#app1&#39;
});

このコンポーネントを親インスタンスで使用するには、インスタンスを作成する前に登録する必要があります。その後、

テンプレートの DOM 構造は要素に含まれている必要があります。「ここにコンポーネントの内容があります」と直接記述した場合、「

」がなければレンダリングされません。 。 (そして、最も外側のレイヤーはルート

タグを 1 つだけ持つことができます)

2.2 Vue インスタンスでは、コンポーネント オプションを使用してコンポーネントをローカルに登録できます。登録されたコンポーネントは、インスタンスのスコープ内でのみ有効です。例:

    <p id="app2">
      <my-component1></my-component1>
    </p>
var app2 = new Vue({
  el: &#39;#app2&#39;,
  components:{
   &#39;my-component1&#39;: {
     template: &#39;<p>这里是局部注册组件的内容</p>&#39;
   }
  }
});

2.3 データは関数である必要があります

テンプレート オプションに加えて、コンポーネントはデータ、計算済み、メソッドなどの Vue インスタンスのような他のオプションも使用できます。ただし、データを使用する場合、データは関数である必要があり、そのデータが返されるという例とは少し異なります。

    <p id="app3">
      <my-component3></my-component3>
    </p>
Vue.component(&#39;my-component3&#39;,{
  template: &#39;<p>{{message}}</p>&#39;,
  data: function(){
    return {
      message: &#39;组件内容&#39;
    }
  }
});
var app3 = new Vue({
  el: &#39;#app3&#39;
});

一般に、返されたオブジェクトは外部オブジェクトを参照すべきではありません。返されたオブジェクトが外部オブジェクトを参照している場合、このオブジェクトは共有され、どちらかの当事者による変更が同期されるからです。

したがって、一般的には、新しい独立したデータ オブジェクトがコンポーネントに返されます。

補足: vue-router コンポーネントの再利用の問題

コンポーネント システムは Vue の重要な部分であり、コンポーネントを組み合わせることで、複雑なページ抽象化を多数の独立した再利用可能なコンポーネントに分解できます。 vue-router のルーティング関数を使用して、各コンポーネントを対応するルートにマッピングします。ルーティングの変更を通じて、Vue にコンポーネントをレンダリングする場所が指示され、各コンポーネントと各ページ間のジャンプ ナビゲーションが実現されます。

問題

vue-router を使用してルートを切り替えると、コンポーネント ツリーの更新がトリガーされ、定義されたルートに基づいて新しいコンポーネント ツリーがレンダリングされます。おおよその切り替えプロセスは次のとおりです。

- 非アクティブ化して、不要なコンポーネントを削除する
- 切り替えの実現可能性を検証する
- 更新されていないコンポーネントを再利用する
- 新しいコンポーネントを有効にして有効化する

具体的なルーティング切り替え制御プロセスについては公式ドキュメントを参照してください: Switching Control Pipeline

vue の仕組み-ルータージャッジ 特定のコンポーネントは再利用できますか? 次のルーティング設定を見てみましょう:

{
  path: 'post/:postId',
  name: 'post',
  component: resolve => require(['./components/Post.vue'],resolve)
}

これは、記事 ID を通じて対応する記事ページをロードするルートで、初めてアクセスすると、Post.vue コンポーネントがコンポーネントにレンダリングされます。ツリーに追加され、マウントされたコンポーネントが記事 ID を通じて記事コンテンツを取得してページに表示されると、別の記事にアクセスすると、ルーティング パラメーター: postId が期待どおりに変更されます。記事が表示されるはずですが、裏目に出ます。

表示されているのはまだ前の記事です。ルーティング パラメーターは変更されていますが、このコンポーネントは以前にレンダリングされているため、vue-router は前のコンポーネントを直接再利用します。また、マウントされたライフサイクル機能を含むコンポーネント内の操作は実行されません。

それで、最終的に表示されるのは、元のコンポーネントのコンテンツです。

それでは、どうすれば望ましい効果を達成できるでしょうか?効果的な解決策を以下に紹介します

解決策

監視リスナーを使用してルーティングの変更を監視し、ルーティングパラメータの変更に基づいて対応するデータに応答できます。具体的な実装プロセスは次のとおりです。データ取得メソッド

まず記事を取得するメソッドを定義し、記事IDを元にバックグラウンドから該当する記事情報を取得します。

methods: {
  getPost(postId) {
    this.$http.get(`/post/get_post/${postId}`).then((response) => {
      if(response.data.code === 0){
        this.post = response.data.post;
      }
    });
  }
}

ルートをリッスンする

次のステップは、ルートが切り替えられたときにターゲットコンポーネントがPost.vueコンポーネントであるかどうかを判断することです。これは、定義されたルート名に基づいて実装できます。そのため、ルーティング情報から対象の記事 ID を取得してコンポーネントの内容を更新します。

watch: {
  '$route' (to, from) {
    if(to.name === 'post'){
      this.getPost(to.params.postId);
    }
  }
}

コンポーネントの初期化

ここで注意すべき点は、コンポーネントがコンポーネントツリーに初めてマウントされるとき、このとき、コンポーネントをマウントする必要があることです。ライフサイクルフックで初期化作業を実行します:

mounted() {
  this.getPost(this.$route.params.postId);
}

最後に書きます

上記のメソッドを通じて、ルーティングパラメータの変更に応じてコンポーネントのコンテンツを更新でき、ルーティングパラメータの問題を効果的に解決できますvue-router コンポーネントの再利用による無効化についての質問です。

上記は私が皆さんのためにまとめたものであり、今後皆さんのお役に立てば幸いです。

関連記事:

JavaScriptで指定範囲の時刻リストを生成

webpack.config.jsをベースにしたパラメータの詳細説明

expressベースのファイルアップロードを実装するnodejsメソッド

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