具名作用域插槽
2021-10-11 本文已影响0人
coderfl
父组件:
<template>
<table-cpt>
<template v-slot:aaa="bbb">
666 - {{bbb.ccc}} - {{bbb.eee}}
</template>
</table-cpt>
</template>
<script>
import TableCpt from 'views/table/TableCpt';
export default {
components: { TableCpt }
}
</script>
子组件:
<template>
<div>
<div>unDefault - <slot name="aaa" :ccc="ddd" :eee="'eee'" /></div>
<div>default<slot /></div>
</div>
</template>
<script>
export default {
name: 'TableCpt',
data() {
return {
ddd: {
a: 1,
b: 2,
c: 3
}
};
}
};
</script>
结果:
![](https://img.haomeiwen.com/i21345596/3ad42e12c4af5923.png)