vue-cli--グローバルコンポーネントのカスタマイズ

1200 ワード

一、グローバル構成
1、共通コンポーネントの作成
componentsフォルダloadにloadingを新規作成します.vueとloading.js 2つのファイル、vueファイルは共通コンポーネントを書くために使用され、jsはこのコンポーネントをエクスポートするために使用されます.
2、共通コンポーネントのエクスポート
loading.jsでは、このコンポーネントを使用する名前と、使用方法を規定しています.
import Loading from './loading.vue'
const loading={
    install:function(Vue){
        // Vue.component()          
        Vue.component('loading',Loading)
    }  // loading'               ,install vue          
}
export default loading

3、共通コンポーネントの導入
//  main.js           ,    vue 
import Loading from './loading'
Vue.use(Loading)

4、共通コンポーネントを呼び出す
カスタムコンポーネントは、プロジェクト内の任意の場所で使用できます.

二、局部配置
1、全体のコンポーネントを書く
componentsにloadingを作成します.vueのファイル、中に論理コードを書きます
2、局部導入コンポーネント
ここでは上記より簡単に、このコンポーネントを使用する必要があるvueファイルに直接このvueファイルを導入し、componentに登録すれば使用できます.
//     
import Loading from '@/components/loading'

//     ,     ,      
components: {
    Loading
}

//       

転載先:https://www.cnblogs.com/zjh-study/p/10647652.html