実際のプロジェクトでvueコンポーネントの再利用を実装する方法

今回は実践プロジェクトでvueコンポーネントを再利用する方法についてお届けします。実践的なプロジェクトでvueコンポーネントを再利用する際の注意点を紹介します。

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

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

コンポーネントを使用するには、登録する必要があります。グローバル登録とローカル登録の 2 つの方法があります。 2.1 グローバル登録後は、任意の V ue インスタンスを使用できるようになります。例:

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

このコンポーネントを親インスタンスで使用するには、インスタンスが作成される前にコンポーネントを登録する必要があります。その後、コンポーネントを の形式で使用できます。テンプレートの DOM 構造は要素に含まれている必要があります。「ここにコンポーネントの内容があります」と直接記述した場合、「

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

表示されているのはまだ前の記事です。ルーティング パラメーターは変更されていますが、このコンポーネントは以前にレンダリングされているため、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组件，这里可以根据定义的路由名称name实现，如果是，我们就可以从路由信息中获取目标文章ID来更新组件内容。

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

组件初始化

这里需要注意的是，当组件首次被挂载到组件树上时，对路由的监听是无效的，这时我们需要在生命周期钩子mounted对组件进行初始化工作：

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

写在最后

通过上面的方法就可以实现组件内容随路由参数的变化而更新了，有效解决了vue-router组件复用导致路由参数失效的问题。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue项目中watch的immediate使用

create-react-app配置eslint步骤详解

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