雲橙雨林

一般而言，我們在導入子組件，通常會在組件裡 使用 import 方式導入

import SupplyListSelect from '../../supply/parts/SupplyListSelect.vue';

在componets 導入 組件 

components   : {
    appSupplyListSelect: SupplyListSelect,
},

在 html 部份寫入（pug）

app-supply-list-select(
slot="listSelect"
)

正常為這樣的寫法，可常我們程式寫大的時候，這樣其實並不好維護，我們希望能夠在 Js 統一管理所有 componet ，並非分散管理componet

此時的寫法，就不要這樣寫了

建立 resources/assets/js/components/components.js

在 resources/assets/js/app.js 裡

import Components from './components/components.js';

Object.keys(Components).forEach(key => {
    Vue.component(key, Components[key]);
});

編輯 resources/assets/js/components/components.js

import BaseAlertAjaxError from './parts/alert/BaseAlertAjaxError';

export default Object.assign({
    BaseAlertAjaxError,  
})

在組件就可以直接叫出

base-alert-ajax-error(
v-bind:ajax-error="getAjaxError"
)

這樣在組件就不需再 import 一次，在每個組件，也可重覆共用。

------------------------------

前台：Vue.js 2+

後台：Laravel 5.5

系統：PHP7

HTML: Pug

Css: SASS

JQuery: 無

前後端分離寫法