vue のプラグインとコンポーネントの違いは何ですか

違い: 1. コンポーネントは「Vue.component」または「components」属性を通じて登録されますが、プラグインは「Vue.use()」を通じて登録されます; 2. コンポーネントは、コンポーネントを構成するために使用されます。アプリのビジネスモジュールとそのゴール それは「App.vue」であり、プラグインはテクノロジースタックを強化するために使用される機能モジュールであり、そのターゲットはVueそのものです。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

1. コンポーネントとは

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

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

コンポーネントの利点

• システム全体の結合を軽減します。インターフェイスは変更せずに、さまざまなコンポーネントを置き換えて要件を迅速に完了できます。たとえば、特定の実装では、入力ボックスをカレンダー、時刻、範囲などのコンポーネントに置き換えることができます

• システム全体がコンポーネントで構成されているため、デバッグは簡単です。問題が発生した場合は、トラブルシューティング方法を使用してコンポーネントを直接削除することも、問題を報告したコンポーネントに基づいて問題を迅速に特定することもできます。迅速な位置決めができる理由は、各コンポーネントと単一の責任の間の結合が低いため、システム全体を分析するよりもロジックが単純になるためです。

• 各コンポーネントが独立しているため、保守性が向上します責任は 1 つだけであり、コンポーネントはシステム内で再利用されるため、コードを最適化することでシステム全体のアップグレードを実現できます

2. プラグインとは

プラグインは通常、Vue グローバル機能の追加に使用されます。プラグインの機能範囲には厳密な制限はありません。通常は次のタイプがあります。

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

3. 2 つの違い

2 つの違いは主に次の点に反映されます:

• 書き込みフォーム
• 登録フォーム
• 利用シナリオ

書き込みフォーム

書き込みコンポーネント

コンポーネントを記述する方法は多数あります。最も一般的なのは、vue 単一ファイル形式です。すべての .vue ファイルを表示できます。これはコンポーネントです

vueファイル標準形式

<template>
</template>
<script>
export default{ 
    ...
}
</script>
<style>
</style>

template属性を使用してコンポーネントを記述することもできます。コンポーネントのコンテンツが少ない場合は、template コンポーネントのコンテンツを外部で定義できます。コンポーネントのコンテンツがそれほど多くない場合は、template 属性

<template id="testComponent">     // 组件显示的内容
    <div>component!</div>   
</template>

Vue.component(&#39;componentA&#39;,{ 
    template: &#39;#testComponent&#39;  
    template: `<div>component</div>`  // 组件内容少可以通过这种形式
})

## に直接記述することができます。 #プラグインの作成

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

MyPlugin.install = function (Vue, options) {
  // 1\. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2\. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3\. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4\. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

Registration form

コンポーネントの登録

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

グローバル登録は

Vue.component メソッドを使用し、最初のパラメータはコンポーネントの名前で、2 番目のパラメータは受信構成項目です。

Vue.component('my-component-name', { /* ... */ })

部分登録では、コンポーネントが使用される

components 属性を介してコンポーネントを登録することのみが必要です

const component1 = {...} // 定义一个组件export default {
    components:{
        component1   // 局部注册
    }}

プラグインの登録

プラグインの登録は、

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

Vue.use(插件名字,{ /* ... */} )

注:

プラグインを登録するときは、

new Vue()# を呼び出す前に完了する必要があります。 ## アプリケーションを開始します

Vue.use

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

使用シナリオ

具体的には、プラグインとは何かについての章で説明されていますが、ここで要約します。

Component

(Component)

は、 App を構成するために使用されるビジネス モジュールです。その目標は App.vuePlugin

(Plugin)

です。これは、次の目的で使用される機能モジュールです。技術スタックを強化し、その目標は Vue 自体です 簡単に言うと、プラグインとは

Vue

## の機能の拡張または補足を指します。 #[関連する推奨事項:「vue.js チュートリアル

」]

以上がvue のプラグインとコンポーネントの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。