Subscribe on changes!

slot cannot work in jsx ,how to fix it?

avatar
May 30th 2021

Version

3.0.5

Steps to reproduce

my jsx code:

<el-popover placement='right' width='300' trigger='hover'>
          {popoverContent}
     <el-tag key={item.teacherName} size='mini' slot='reference'>
         {item.teacherName}
     </el-tag>
</el-popover>

it work well in vue2, but cannot in vue3. change to h function, it work.

h(
        ElPopover,
        { placement: 'right', width: '300', trigger: 'hover' },
        {
          default: () => popoverContent,
          reference: () => {
            return (
              <el-tag key={item.teacherName} size="mini">
                {item.teacherName}
              </el-tag>
            )
          },
        },
      )

What is expected?

I want to write slot in jsx not h funtion, how can i do it?

jsx is close template.

What is actually happening?

vue3 dont support slot prop in jsx.

avatar
May 30th 2021

This is not related to Vue core, move to jsx-next