Vueのグローバルコンポーネントを使用して登録する方法

今回は、Vue のグローバル コンポーネントを use で登録する方法と、Vue のグローバル コンポーネントを use で登録する際の 注意事項 について説明します。実際のケースを見てみましょう。

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

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

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

install」を実行します。 " はグローバル コンポーネントです。軽くなったように見えます。

方法:

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

2.components.jsファイルに登録するすべてのファイルを作成します

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

例としてコンポーネントを取り上げます。 、グローバルコンポーネントEgが登録されます。

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

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

グローバルディレクティブの登録には、公式ドキュメントに記載されている方法では、Vue.

directive()を使用します。その場合、問題が発生します。複数のグローバル ディレクティブがあり、複数のグローバル コンポーネントと組み合わせると、app.js ファイルが非常に肥大化します。

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

方法:

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

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

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

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

v-focus 命令を例に挙げます:

directives.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);

このグローバルディレクティブのように登録します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue2.0axios クロスドメインとレンダリングの使用方法

JS を使用してすべての重複文字を削除する方法

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