一般而言,我們在導入子組件,通常會在組件裡 使用 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: 無

前後端分離寫法

 

arrow
arrow
    文章標籤
    Vue component 組件 網頁
    全站熱搜

    雲橙雨林 發表在 痞客邦 留言(0) 人氣()