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