vueグローバル登録コンポーネントと命令

グローバルとローカルの区別
グローバル
登録が完了すると、各コンポーネントに共通コンポーネントを導入してローカルに登録する必要がなく、通常、srcフォルダの下にあるcomponentsフォルダに共通コンポーネントを配置する必要がなく、任意のコンポーネントで直接ラベルを使用できます.ここで、コンポーネントはグローバルに登録されます.
ローカル
ページ内のプライベートコンポーネントは、それぞれのページフォルダに配置され、次のコードを使用してローカルに登録されます.

import ComponentA from './ComponentA'
import ComponentB from './ComponentB'
export default {
  name: "part",
  components: { ComponentA, ComponentB },
}

グローバル登録方法
1.srcフォルダにutilsフォルダを新規作成し、utilsフォルダに一般的に共通の補助ファイル(方法、データなど)を格納する2、フォルダにcomponents.jsファイルを新規作成する3、components.jsファイルに登録するグローバルコンポーネント4をすべて導入する4、main.jsにcomponents.jsファイルを取り込み、Vue.use()を使用してグローバル登録する
コード
utils - components.js

import ComponentA from '@/components/ComponentA' // ComponentA
import ComponentB from '@/components/ComponentB' // ComponentB

export default (Vue)=>{
  Vue.component("ComponentA", ComponentA)
  Vue.component('ComponentB', ComponentB)  
}

main.js

import components from '@/utils/components.js'
Vue.use(components)

new Vue({
  // ...
})

使用

インストラクション
グローバル命令の登録方法は、グローバルコンポーネント1と、srcフォルダにutilsフォルダを新規作成し、utilsフォルダには一般的に共通のアシストファイル(方法、データなど)2を格納し、フォルダにdirectives.jsファイルを新規作成する3と、directives.jsファイルに登録するグローバル命令4をすべて導入する4と、main.jsにdirectives.jsファイルを導入し、Vue.use()を使用してグローバルに登録する
コード
utils - directives.js

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

main.js

import directives from '@/utils/directives.js'
Vue.use(directives)

new Vue({
  // ...
})

検索サイト
検索サイト