Multi-file Custom Components

For complex custom components, UI-PaaS supports splitting them into multiple files to achieve a clearer and more logical code structure.

Example: A custom component with the following files

• secondComponent.vue (entry)
• subComponent.vue
• helper.js

Code: secondComponent.vue

<template>  
    <div style="width: 100%;">  
        Hello: {{myName}}  
        <subComponent></subComponent>  
    </div>  
</template>  
<script>  
import subComponent from './subComponent';  
import helper from './helper';  
export default {  
    components: {  
        subComponent  
    },  
    data() {  
        return {  
            myName: "Developer"  
        }  
    }  
}  
</script>  

Code: subComponent.vue

<template>  
    <div style="width: 100%;">  
        Hello: subComponent  
    </div>  
</template>  
<script>  
export default {  
}  
</script>  

Code: helper.js

export default {  
    formatData() {  
        return {};  
    }  
}