Vue3 jsx写法中使用子组件定义的具名插槽

325 阅读1分钟

1、在 Vue3 的 jsx 中传入插槽时,需要使用 v-slots 代替 v-slot

const node = () = >{
    return (
    <Menu>
      <MenuItem
        key={`${node.id}_Array`}
        v-slots={{
          icon: () => (<SvgIcon name="Array" width="20px" height="20px" color="black"/>)
        }}>
       </MenuItem>
     </Menu>
    )
}

2、单独定义一个slot (结合Antd-Vue的Dropdown组件使用如下)

const slots = {
    overlay: () => <div>'Hello, header.'</div>,
}
const node = () = >{
    return () => (
        <div>
          <Dropdown placement="bottom" trigger={['contextmenu']} arrow v-slots={slots}>
            <Button>点击</Button>
          </Dropdown>
        </div>
      )
}