ホームページ > 記事 > ウェブフロントエンド > vue コンポーネントの使用方法と関数の再利用方法

vue コンポーネントの使用方法と関数の再利用方法

php中世界最好的语言オリジナル: 2018-05-25 15:36:261320ブラウズ

今回は、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 の ルーティング関数を組み合わせて、各コンポーネントを対応するルートにマップし、コンポーネントとページ間のジャンプを実現するためにルーティングの変更を通じてコンポーネントをレンダリングする場所を Vue に指示します。

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

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

- 新しいコンポーネントを有効にして有効化する

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

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

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

これは、初めてアクセスされたときに、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组件，这里可以根据定义的路由名称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 コンポーネントの使用方法と関数の再利用方法

関連記事