How to move slot and slot-scope to vue 3 v-slot rule

Question

I get this error when I'm using Ant-design table for VueJS

<template slot="name" slot-scope="name"> {{ name.first }} {{ name.last }} </template>

After I changed to Vue 3 rules still nothing showed:

<template v-slot:name v-slot="name"> {{ name.first }} {{ name.last }} </template>

Answer 1

Your markup below doesn't work because it marks the template with two slot names; i.e., the name slot (in v-slot:name) as well as the default slot (in v-slot="name"):

<template v-slot:name v-slot="name"> {{ name.first }} {{ name.last }} </template>
          ^^^^^^^^^^^ ^^^^^^^^^^^^^

Here's the correct fix:

<template v-slot:name="name"> {{ name.first }} {{ name.last }} </template>

Answer 2

According to this documentation you should change slot to v-slot

Answer 3

Base on this link https://vuejs.org/guide/components/slots.html#scoped-slots we can use like this :

Old Version :

<template slot="header" slot-scope="headerProps">
    {{ headerProps }}
  </template>

New update :

<MyComponent>
  <template #header="headerProps">
    {{ headerProps }}
  </template>

  <template #default="defaultProps">
    {{ defaultProps }}
  </template>

  <template #footer="footerProps">
    {{ footerProps }}
  </template>
</MyComponent>