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>

如何将v-slot：activator和v-on与子组件一起使用？

1 个答案: