Vue グローバル コンポーネントとグローバル ディレクティブを登録するために use を使用する方法

以下に、use を使用して Vue のグローバル コンポーネントとグローバル命令を登録する方法を紹介します。これは良い参考値であり、皆さんの役に立つことを願っています。

Vue のコンポーネントと命令は、ローカル コンポーネント、ローカル命令、グローバル コンポーネント、グローバル命令に分かれています。一定数のグローバル命令やグローバルコンポーネントを登録する場合、公式ドキュメントの方法は少しわかりにくいようです。

グローバルコンポーネント

Vueの公式ドキュメントでは、Vue.component(tagName, options)を使用してグローバルコンポーネントを作成することが紹介されています。ただし、このメソッドはルート インスタンスと同じファイルに記述されます。複数のグローバル コンポーネントを同時に登録する場合は、ルート インスタンス ファイルが重くなりすぎるため、Vue.use( を使用する方が便利です。 ) グローバルコンポーネントを「インストール」します。

方法:

1.新しいプラグインフォルダーを作成します

2.ファイルcomponents.jsを作成し、そのフォルダーにグローバルコンポーネントを配置します

3.components.jsに登録するすべてのグローバルコンポーネントを導入します。ファイル Components

4. app.js ルート インスタンス ファイルに、components.js を導入します

例としてコンポーネントを取り上げます:

components.js:

import eg from '../components/eg.vue';
export default (Vue)=>{
 Vue.component("Eg",eg);
}

app.js:

import components from './plugins/components.js';
Vue.use(components);

After上記のように書くと、グローバルコンポーネントEgが登録されます。

複数のグローバルコンポーネントを登録する必要がある場合、この方法を使用するとよりすっきりします。

グローバルディレクティブ

グローバルディレクティブの登録には、公式ドキュメントに記載されている方法はVue.directive()を使用しており、その場所もルートインスタンスファイルの下にある場合に問題が発生します。複数のグローバル ディレクティブがあり、複数のグローバル コンポーネントと組み合わせると、app.js ファイルが非常に肥大化します。

したがって、グローバルコンポーネントを登録する上記の方法と同様に、Vue.use() はグローバル命令を「インストール」するためにも使用されます。

方法:

1. 新しいプラグインフォルダーを作成します

2. ファイル directives.js を作成して、フォルダーにグローバルコンポーネントを配置します

3. 登録するすべてのグローバルコンポーネントを導入します。 file Directives

4. app.js ルート インスタンス ファイルに、directives.js を導入します

v-focus ディレクティブを例に挙げます:

directives.js:

export default (Vue)=>{
 Vue.directive("focus",{
  inserted:function(el){
   el.focus();
  }
 })
}

app.js

import directives from "./plugins/directives.js"
Vue.use(directives);

上記は私です。皆さんのためにまとめました。今後皆さんのお役に立てれば幸いです。

関連記事:

jQuery+ajaxによるjsonデータの読み込みと価格による並べ替えの例

vueデータコントロールビューのソースコード分析

ボタンコンポーネントを開発するためのvueサンプルコード

以上がVue グローバル コンポーネントとグローバル ディレクティブを登録するために use を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。