Vue のプラグインとコンポーネントを簡単に分析し、それらの違いについて話しましょう。

コンポーネントとは何ですか?プラグインとは何ですか?次の記事では、Vue のプラグインとコンポーネントを理解し、プラグインとコンポーネントの違いについて説明します。皆様のお役に立てれば幸いです。

#1. コンポーネントとは

Vue では、各 .vue ファイルをコンポーネントとみなすことができます。 。 (学習ビデオ共有: vue ビデオ チュートリアル )

システム全体の結合を減らし、インターフェースは変えずに、異なるコンポーネントを使用します。要件をすばやく完了するために置き換えることができます。たとえば、特定の実装のために入力ボックスをカレンダー、時刻、範囲などのコンポーネントに置き換えることができます。
• システム全体が結合されているため、デバッグが便利です問題が発生した場合、コンポーネントを介して問題が発生した場合、削除方法を使用してコンポーネントを直接削除したり、エラーを報告したコンポーネントに基づいて問題を迅速に特定したりすることができます。
• メンテナンス性の向上 各コンポーネントは単一の責任を持ち、コンポーネントはシステム内で再利用されるため、コードを最適化することでシステム全体のアップグレードを実現できます。システム

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

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

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

3. 2 つの違い

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

書き込みフォーム

コンポーネントの記述

vue の単一ファイル (各 .vue#) の形式です。 # #私たちは皆、ファイルをコンポーネントとみなすことができます

ファイル標準形式<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">&lt;template&gt; &lt;/template&gt; &lt;script&gt; export default{ ... } &lt;/script&gt; &lt;style&gt; &lt;/style&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

属性を使用してコンポーネントを記述することもできます。コンポーネントのコンテンツが多い場合は、template コンポーネントのコンテンツを外部で定義できます。コンポーネントのコンテンツが少ない場合は、template 属性 に直接記述することができます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">&lt;template id=&quot;testComponent&quot;&gt; // 组件显示的内容 &lt;div&gt;component!&lt;/div&gt; &lt;/template&gt; Vue.component(&amp;#39;componentA&amp;#39;,{ template: &amp;#39;#testComponent&amp;#39; template: `&lt;div&gt;component&lt;/div&gt;` // 组件内容少可以通过这种形式 })</pre><div class="contentsignin">ログイン後にコピー</div></div>

プラグインの実装では、install メソッドを公開する必要があります。このメソッドの最初のパラメーターは Vue コンストラクターで、2 番目のパラメーターはオプションのオプション オブジェクト <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或 property Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive(&amp;#39;my-directive&amp;#39;, { bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) // 3. 注入组件选项 Vue.mixin({ created: function () { // 逻辑... } ... }) // 4. 添加实例方法 Vue.prototype.$myMethod = function (methodOptions) { // 逻辑... } }</pre><div class="contentsignin">ログイン後にコピー</div></div>

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

メソッドを使用し、最初のパラメータはコンポーネントの名前で、2 番目のパラメータは受信構成項目です。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">Vue.component(&amp;#39;my-component-name&amp;#39;, { /* ... */ })</pre><div class="contentsignin">ログイン後にコピー</div></div>1\

ローカル登録は、それが使用される場所でのみ実行する必要があります。

コンポーネントの属性登録<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const component1 = {...} // 定义一个组件 export default { components:{ component1 // 局部注册 } }</pre><div class="contentsignin">ログイン後にコピー</div></div>

プラグインの登録は、

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

アプリケーションを開始する前に完了します

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

使用シナリオ

詳細については、プラグインとは何かの章で説明しましたが、ここで要約しますコンポーネント

は

ビジネス モジュールを形成するために使用されます。その目標は App.vue プラグイン (Plugin) です。テクノロジー スタックを強化するために使用される機能モジュール。その目標は

自体です。 簡単に言えば、プラグインは Vue## の機能の強化または補足を指します。

Web フロントエンド開発,基本プログラミング ビデオ

以上がVue のプラグインとコンポーネントを簡単に分析し、それらの違いについて話しましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。