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-router の routing 関数を組み合わせて各コンポーネントを対応するルートにマッピングし、ルートの変更を通じてどこにレンダリングするかを Vue に指示して、各コンポーネントと各ページ間のジャンプを実現します。ナビゲーション。

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

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

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

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

: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组件，这里可以根据定义的路由名称name实现，如果是，我们就可以从路由信息中获取目标文章ID来更新组件内容。

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

组件初始化

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

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

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

推荐阅读：

怎样使用React高阶组件

如何正确解决Vue 项目中遇到跨域问题

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