Slot scope with multi parameters

Question

When I tried to use two parameters in vue slot scope, I can't find any example about it. When I use the following code to achieve my needs, it will report a parsing error

<template v-slot:name="text, record">
    <div>{{record.name}}</div>
    <div>{{record.short_name}}</div>
</template>

Answer 1

In the parent you should use v-bind to pass props.

• https://v2.vuejs.org/v2/guide/components-slots.html#Other-Examples

• https://v2.vuejs.org/v2/api/#v-bind

   <slot name="mySlot" v-bind:text="text" v-bind:record="record"/>
   // or
   <slot name="mySlot" v-bind="{ text, record }"/>
  

In the child component you can use destructuring.

• https://v2.vuejs.org/v2/guide/components-slots.html#Destructuring-Slot-Props

   <template v-slot:mySlot="{ text, record }">
     <div>{{ record.name }}</div>
     <div>{{ record.short_name }}</div>
   </template>