如何对子组件使用v-slot:activator和v-on？

Question

我的Vue.js项目有一些问题。

父组件：

<v-menu>
          <template v-slot:activator="{ on }">
            <more-actions :ref="'moreActions' v-on="on" />
          </template>
          <v-list>
            <v-list-item @click="handleClick()">
              <v-list-item-title>
                Sample
              </v-list-item-title>
            </v-list-item>
          </v-list>
</v-menu>

MoreActions组件

<template>
  <v-tooltip bottom>
    <template v-slot:activator="{ on }">
      <v-btn icon v-on="on" @click="$emit('click', $event)">
        <v-icon small>
          more_vert
        </v-icon>
      </v-btn>
    </template>
    <span>More Actions</span>
  </v-tooltip>
</template>

这段代码运行良好(在Vuetify v2.1.9下)，但不能在Vuetify v2.1.15下运行(菜单在左上角打开)。

我该如何解决这个问题呢？

下面是v2.1.15中的运行代码

<template>
  <div class="text-center">
    <v-menu>
      <template v-slot:activator="{ on: menu }">
        <v-tooltip bottom>
          <template v-slot:activator="{ on: tooltip }">
            <v-btn icon v-on="{ ...tooltip, ...menu }" @click="$emit('click', $event)">
              <v-icon small>
                more_vert
              </v-icon>
            <v-btn>
          </template>
          <span>Im A ToolTip</span>
        </v-tooltip>
      </template>
          <v-list>
            <v-list-item @click="handleClick()">
              <v-list-item-title>
                Sample
              </v-list-item-title>
            </v-list-item>
          </v-list>
    </v-menu>
  </div>
</template>

请帮帮我。

Answer 1

将此零件移动到父零部件。并在子组件中使用<slot />而不是此部件。

<v-list>
    <v-list-item @click="handleClick()">
        <v-list-item-title>
            Sample
        </v-list-item-title>
    </v-list-item>
</v-list>