[Question] How can I use v-slots to get parameters in the slot?

[CNMathon]

🧐 Problem Description

I can not use v-slots to get parameters in the slot.

💻 Sample code

<ComponentA>
  v-slots={{
    sex: (record) => {
      <>{ record.sex === 0 ? 'male' : 'famale' }</>    // I can't get the "record".
    }
  }}
</ComponentA>

🚑 Other information

This is the code using the Vue template syntax. It is works.

<template>
  <ComponentA>
    <template #sex="{ record }">
      {{ record.sex === 0 ? 'male' : 'famale' }}    <!-- It is works. -->
    </template>
  </ComponentA>
</template>

[CNMathon]

Is there anyone can help me, please? Thanks!

[github-actions]

Hello @CNMathon. In order to facilitate location and troubleshooting, we need you to provide a realistic example. Please forking these link codesandbox or provide your GitHub repository.

[KaelWD]

- sex: (record) => {
+ sex: ({ record }) => {

[funny-family]

@CNMathon.

// inside "ComponentA" component
const sex = 0;
...
{this.$slots.sex !== undefined && (
  <div title="content inside 'sex' slot">
    {this.$slots.sex(sex)} // or {this.context.slots.sex({ sex })}
  </div>
)}

// usage
<ComponentA>
  v-slots={{
    sex: (sex) => {
      <>{sex === 0 ? 'male' : 'famale' }</> 
    }
    /*
       // or
       sex: ({ sex }) => {
          <>{sex === 0 ? 'male' : 'famale' }</> 
       }
    */
  }}
</ComponentA>