3

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

我创建了一个新组件，它使用v-menu来自Vuetify的组件：

// 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>

我究竟做错了什么？

4

1 回答 1

1

您应该通过将 slot和 binding属性scoped slots命名为slot prop 来使用，它可以深入到您的自定义组件中，在其中您会收到以下内容：activatorononon<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>
于 2020-07-08T20:06:21.467 回答