Question

在React中非常容易，因为没有“插槽”。一切都是参数。但我不知道如何将广告位作为参数传递。这就是我所做的。

我创建了一个新组件，该组件使用了Vuetify中的v-menu组件：

// SelectorComponent.vue
<template>
  <v-menu>
    <template v-slot:activator="{ on }">
      <slot name="activator" v-on="on" />
    </template>
    ...

然后我使用了该组件：

<Selector>
  <template v-slot:activator="{ on }">
    <v-btn text v-on="on">Type</v-btn>
  </template>
</Selector>

并且当您按下“类型”按钮时，它不会显示菜单。但是，如果我用按钮替换插槽，它将起作用：

// It works!
<template>
  <v-menu outlined :close-on-content-click="false" offset-y>
    <template v-slot:activator="{ on, attrs }">
      <v-btn text v-on="on">Type</v-btn>
    </template>

我在做什么错了？

Answer 1

您应该使用scoped slots，方法是命名插槽activator并将on属性绑定到on插槽属性，该属性可以深入到您的自定义组件中，您将在其中收到on为<template v-slot:activator="{ on }">：

/ SelectorComponent.vue
<template>
  <v-menu>
    <template v-slot:activator="{ on }">
      <slot name="activator" :on="on" />
    </template>
    ...

然后像这样使用它：

<Selector>
  <template v-slot:activator="{ on }">
    <v-btn text v-on="on">Type</v-btn>
  </template>
</Selector>

Vue，构图：传递“广告位”属性作为属性值

1 个答案: