Vue のプラグインとコンポーネントの違いと使い方のまとめ

このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DELL G3 コンピュータ。

1. コンポーネントとは何ですか?

コンポーネントの以前の定義を思い出してください。

コンポーネントとは、さまざまなグラフィックおよび非グラフィックのロジックを統一された概念 (コンポーネント) に抽象化する開発モデルです。Vue では、各 .vue ファイルをコンポーネントと見なすことができます。

コンポーネントの利点

• システム全体の結合を減らします。インターフェースを変更せずに、さまざまなコンポーネントを置き換えて、要件を迅速に満たすことができます。たとえば、入力ボックスは、特定の実装に合わせてカレンダー、時間、範囲などのコンポーネントに置き換えることができます。
• デバッグが簡単。システム全体がコンポーネントで構成されているため、問題が発生した場合、消去法を使用してコンポーネントを直接削除するか、エラーを報告したコンポーネントに基づいて問題をすばやく特定できます。すぐに特定できる理由は、各コンポーネントが疎結合で単一の責任を持っているため、システム全体を分析するよりもロジックが単純になるためです。
• 保守性の向上。各コンポーネントは単一の責任を持ち、システム内でコンポーネントが再利用されるため、コードを最適化するとシステム全体のアップグレードを実現できます。

2. プラグインとは何ですか?

プラグインは、Vue にグローバル機能を追加するためによく使用されます。プラグインの機能の範囲には厳密な制限はありません。一般的に、プラグインは次のカテゴリに分類されます。

• グローバル メソッドまたはプロパティを追加します。例えば: vue-custom-element
• グローバル リソースを追加します: ディレクティブ/フィルター/トランジションなど。 vue-touchなど
• グローバル ミックスインを介していくつかのコンポーネント オプションを追加します。 vue-routerなど
• Vue インスタンス メソッドを Vue.prototype に追加して追加します。
  
• 独自の API を提供し、上記の機能の 1 つ以上を提供するライブラリ。 vue-routerなど
  

3. 両者の違い

両者の違いは主に以下の点に反映されています。

• 文章の形式
• 登録フォーム
• 使用シナリオ

文章の形式

コンポーネントの記述

コンポーネントを記述する方法は多数あります。最も一般的な方法は、vue 単一ファイル形式です。各 .vue ファイルはコンポーネントとみなすことができます。

vueファイルの標準フォーマット

<テンプレート>
</テンプレート>
<スクリプト>
エクスポートデフォルト{ 
    ...
}
</スクリプト>
<スタイル>
</スタイル>

テンプレート属性を通じてコン​​ポーネントを書き込むこともできます。コンポーネントのコンテンツが大きい場合は、テンプレート コンポーネントのコンテンツを外部で定義できます。コンポーネントのコンテンツが大きくない場合は、テンプレート属性に直接書き込むことができます。

<template id="testComponent"> // コンポーネント表示コンテンツ <div>component!</div>   
</テンプレート>
 
Vue.component('componentA',{ 
    テンプレート: '#testComponent'  
    template: `<div>component</div>` // この形式は、コンテンツの少ないコンポーネントに使用できます})

プラグインの作成

Vue プラグインの実装では、インストール メソッドを公開する必要があります。このメソッドの最初のパラメーターは Vue コンストラクターであり、2 番目のパラメーターはオプションのオプション オブジェクトです。

MyPlugin.install = 関数 (Vue、オプション) {
  // 1\. グローバルメソッドまたはプロパティを追加する
  Vue.myGlobalMethod = 関数（）{
    // ロジック...
  }
 
  // 2\. グローバルリソースを追加する Vue.directive('my-directive', {
    バインド (el、バインディング、vnode、oldVnode) {
      // ロジック...
    }
    ...
  })
 
  // 3\. コンポーネントオプションを挿入する Vue.mixin({
    作成: 関数 () {
      // ロジック...
    }
    ...
  })
 
  // 4\. インスタンスメソッドを追加する Vue.prototype.$myMethod = function (methodOptions) {
    // ロジック...
  }
}

登録フォーム

コンポーネント登録

Vueコンポーネントの登録は主にグローバル登録とローカル登録に分かれています

グローバル登録は Vue.component メソッドを通じて行われます。最初のパラメーターはコンポーネントの名前で、2 番目のパラメーターは渡された構成項目です。

Vue.component('コンポーネント名', { /* ... */ })

ローカル登録では、コンポーネントが使用されるコンポーネント プロパティを通じてコン​​ポーネントを登録するだけです。

const component1 = {...} // コンポーネントを定義する export default {
    コンポーネント:{
        コンポーネント1 // ローカル登録}}

プラグイン登録

プラグインは Vue.use() を介して登録 (インストール) されます。最初のパラメータはプラグインの名前で、2 番目のパラメータはオプションの構成項目です。

Vue.use(プラグイン名,{ /* ... */ )

ご了承ください：

プラグインを登録する場合は、new Vue() を呼び出してアプリケーションを起動する前に登録する必要があります。

Vue.useは、同じプラグインの複数の登録を自動的に防止し、一度だけ登録します。

使用シナリオ

詳細はプラグインとは何かのセクションで説明しているので、ここでまとめておきます。

コンポーネントは、アプリのビジネスモジュールを形成するために使用されます。そのターゲットはApp.vueです。

プラグインは、テクノロジースタックを強化するために使用される機能モジュールです。そのターゲットは Vue 自体です。

簡単に言えば、プラグインは Vue の機能を強化または補足するものです。

以上で、Vue のプラグインとコンポーネントの違いと使い方のまとめの記事は終了です。Vue のプラグインとコンポーネントの違いについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。