这里以一个table组件的二次包装为案例，父组件中使用子组件（table组件）再次包装：
Vue2：
子组件，inTable
<template>
<table>
<thead>
<tr>
<th
v-for="(item, index) of columns"
:key="index">
{{ item.title }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) of dataSource" :key="index">
<td
v-for="(k, i) in columns"
:key="i">
<slot v-if="k.slot" :name="k.slot" :record="item" :value="item[k.key]">
{{ !item[k.key] && item[k.key] !== 0 ? '-' : item[k.key] }}
</slot>
<template v-else>
{{ !item[k.key] && item[k.key] !== 0 ? '-' : item[k.key] }}
</template>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
props: {
columns: {
type: Array,
default: () => []
},
dataSource: {
type: Array,
default: () => []
}
}
}
</script>
父组件，myTable
<template>
<div>
<in-table
:columns="columns"
:data-source="dataSource">
<template
v-for="t in columns.filter(k => k.slot)"
#[t.slot]="{value, record}">
<slot
:name="t.slot"
:record="record"
:value="value"></slot>
</template>
</in-table>
</div>
</template>
<script>
import InTable from './inTable.vue'
export default {
components: {
InTable
},
props: {
columns: {
type: Array,
default: () => []
},
dataSource: {
type: Array,
default: () => []
}
}
}
</script>
使用示例组件：
<template>
<div>
<my-table columns="columns">
<template #test3="{ value, record }">这里是替换“内容3”的内容</template>
</my-table>
</div>
</template>
<script>
import MyTable from './myTable.vue'
export default {
components: {
MyTable
},
data () {
return {
columns: [
{ title: '测试1', key: 'key1' },
{ title: '测试2', key: 'key2' },
{ title: '测试3', key: 'key3', slot: 'test3' }
],
dataSource: [
{ key1: '内容1', key2: '内容2', key3: '内容3' }
]
}
}
}
</script>
