vuejs2 - 如何将 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>

请帮我。

标签： vuejs2vuetify.js

Answer 1

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

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