// 子组件
import {defineComponent, onBeforeMount, reactive, ref, renderSlot} from "vue";
import type { SetupContext } from "vue";
export const list = defineComponent({
props: {
list: { type: Array, default: () => [] },
},
setup(props, { slots }: SetupContext) {
return (h) => (
<div>
{props.list.map((item: any, index) => {
return (
<div>
{/* render的使用 */}
<div>
{item.render(h, item)}
</div>
{/* 插槽的使用 */}
<div>
{renderSlot(slots, "A", {'item': item, 'index': index})}
</div>
</div>
)
})}
</div>
)
}
})
// 父组件
<template>
<div>
<list :list="list">
// 插槽的使用
<template #A="scope">
<div @click="look(scope)">查看参数</div>
</template>
</div>
</div>
</template>
const list = [
{
id: 1,
name: '名字',
render(h, row) {
// h('div', {}, row.type == "1" ? '正常' : '禁用')
return row.type == "1" ? '正常' : '禁用'
}
}
]
function look(scope) {
console.log(scope.item)
// 输出 {id: 1,name ....}
console.log(scope.index)
// 输出 下标 0
}
vue3 + jsx 插槽带参数的使用以及参数中带有render函数的使用
于 2022-05-25 10:31:08 首次发布