具有多参数的插槽范围

Question

当我尝试在 vue slot 范围内使用两个参数时，我找不到任何关于它的示例。当我使用以下代码实现我的需求时，会报解析错误

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

Answer 1

在父级中，您应该使用v-bind传递道具。

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

• https://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 }"/>
  

在子组件中，您可以使用解构。

• https://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>