vue如何复用子组件？

Question

table自定义行里有个封装的select组件，每次新增一行，这个select组件都会mounted一次，如何复用？

路由页面:

<template>
    <el-table :data="data" size="mini" border style="width: 50%;margin: 200px">
        <el-table-column type="index" align="center" label="#" width="80"></el-table-column>
        <el-table-column label="商品" align="center">
            <test-selector slot-scope="{row}" v-model="row.cid"></test-selector>
        </el-table-column>
        <el-table-column align="center" width="40">
            <el-button slot="header" slot-scope="{row}" size="mini" type="text"
                       icon="el-icon-plus" @click="addSub">
            </el-button>
            <el-button slot-scope="d" size="mini" type="text" icon="el-icon-delete"
                       @click="delSub(d.row,d.$index)">
            </el-button>
        </el-table-column>
    </el-table>
</template>

<script>
    import TestSelector from './TestSelector'

    export default {
        name: "test",
        components: {TestSelector},
        data: () => ({data: []}),
        methods: {
            addSub() {
                this.data.push({cid: null});
            },
            delSub(row, index) {
                this.data.splice(index, 1);
            },
        }
    }
</script>

自定义的select组件：

<template>
    <el-select :value="value">
        <el-option v-for="item in data" :key="item" :value="item" :name="item"></el-option>
    </el-select>
</template>

<script>
    export default {
        name: "TestSelector",
        props: {value: Number},
        data: () => ({data: [1, 2, 3, 4]}),
        mounted() {
            console.log('TestSelector mounted...');
        }
    }
</script>

图片：

Answer 1

这个就没什么好办法了，毕竟确实在循环中循环出了多个组件，也不适合合并为1个。