How to Reuse Custom Components

This section explains how to reuse custom components to reduce code volume and better manage/maintain the component system.

Prerequisites

Before learning how to debug custom components, you should know:

1. Custom components are developed based on the JavaScript ecosystem
2. Custom components are developed based on the Vue ecosystem

Component Reuse Example

Assume the original component source code is:

<template>  
    <div>  
        The following is a list component:  
        <ul>  
            <li v-for="item in list">{{item}}</li>  
        </ul>  
    </div>  
</template>  
<script>  
    export default {  
        data(){  
            return {  
                list: ['one', 'two', 'three']  
            }  
        }  
    }  
</script>  

We'll split the component into:

Parent Component:

<template>  
    <div>  
        The following is a list component:  
        <AsyncComponent apiName="component_TSrsm__c" :data="{list: this.list}"></AsyncComponent>  
    </div>  
</template>  
<script>  
    export default {  
        components: {  
            AsyncComponent: FxUI.component.get('AsyncComponent')  
        },  
        data() {  
            return {  
                list: ['one', 'two', 'three']  
            }  
        }  
    }  
</script>  

Reusable Component:

<template>  
    <ul>  
        <li v-for="item in data.list">{{item}}</li>  
    </ul>  
</template>  
<script>  
    export default {  
        props: ['data']  
    }  
</script>