如何复用自定义组件

该章节介绍如何复用自定义组件，能够减少代码体积、更好地管理和维护组件系统。

前提

在学习如何调试自定义组件之前，您需要知道：

1. 自定义组件是基于 javascript 体系开发的
2. 自定义组件是基于 vue 体系开发的

复用组件示例

假设组件源代码如下：

<template>
    <div>
        下列是列表组件：
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                list: ['one', 'two', 'three']
            }
        }
    }
</script>

我们将组件进行拆分：

父组件：

<template>
    <div>
        下列是列表组件：
        <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>

复用的组件：

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