名为插槽“激活器”的Vue JS Vuetify菜单未绑定到模板，而是转到“默认”

Question

我似乎无法让 Vuetify v-menu 的示例代码在我的 PWA 应用程序中工作，但它在 Fiddle 中正常工作（例如https://jsfiddle.net/tjw13yz4/27/）

问题是：激活器插槽内容没有出现。

通过调试 vuetify 源代码，我发现激活器模板出现在“默认”槽（所有隐藏内容所在的位置）下，而不是在命名的激活器槽（可见按钮/点击区域应该所在的位置）中。

我已将我的应用程序简化为基本框架（最初我有动态组件、表单、API 等），因此我将其简化为顶级 v-app 元素内的一个 v-menu，并删除了所有路由器，商店和其他插件。这很简单，我可以得到它，但仍然不起作用。小提琴和我的本地应用程序之间唯一的区别是构建系统。

我还尝试更改/删除插槽道具和on通过按钮的绑定，这确实修改了命名插槽在 Vuetify（或 Vue）中的内部表示方式。然而，无论有没有道具的版本都不能正确绑定命名槽。

我还更新并重建了 npm（在另一个 SO 中建议），所以我使用的是最新的 Vue 2.6.10 和 Vuetify 1.5.14。

我还确保我正在包装<v-app></v-app>（但在我安装 Vuetify 插件时发生了这种情况），如其他 SO 中所述。

我还阅读了这篇 SO，我发现它在调试中很有用。

我试过slot=activator直接放在 HTML 标签上，而不是使用模板。

而且我可能尝试了很多其他的东西，（最初我只是遇到了一个on没有定义 for v-on的问题，但这是由于这个潜在的问题）。

这些是我的简化文件 - 这一切都非常标准：

App.vue（有/没有用于事件绑定的道具）

<template>
  <v-app>

    <v-menu offset-y>
      <template v-slot:activator>
        <v-btn color="primary" dark>Dropdown</v-btn>
      </template>

      <p>The menu content</p>
    </v-menu>

    <v-menu offset-y>
      <template v-slot:activator="{ on }">
        <v-btn color="primary" v-on="on" dark>Dropdown2</v-btn>
      </template>

      <p>The menu2 content</p>
    </v-menu>

  </v-app>
</template>

主文件

import Vue from "vue";
import "./plugins/vuetify";
import App from "./App.vue";
new Vue({
  render: h => h(App)
}).$mount("#app");

插件/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'md',
})

索引.html

当它运行时，我在其中设置了一个断点，node_modules/vuetify/src/components/VMenu/mixins/menu-generators.js并在此处返回 null，因为没有设置任何类型的插槽：

    genActivator: function genActivator() {
        if (!this.$slots.activator && !this.$scopedSlots.activator) return null;

在我的应用程序中，Chrome 调试检查器在v-btn下的p标记旁边显示default $slot，但它应该在自己的标记下。

相比之下，在工作 Fiddle 中，在调试相同的功能时，当我包含 v-on=on 事件绑定时，我看到activator节点下$scopeSlots，而$slots如果不包含。它工作正常。

为什么v-slot=activator声明不能生效？

Answer 1

阅读此答案后：https : //stackoverflow.com/a/55268990/209288我发现旧的（Vue v2.6 之前的）语法在我的精简应用程序中都可以正常工作，然后也在我的原始应用程序中就位成分。

<template slot="activator" slot-scope="{ on }">

因此，我意识到我的应用程序一定仍在运行旧版本，即使我在执行 npm 更新后在 Vui UI 中使用了“构建”选项。

我刚刚停止并重新启动vue-cli-service serve命令（在 UI 中），现在一切都按预期工作了！

所以我想我仍然在运行 Vue v2.5.22并且来自 VSCode 的构建只是热重载某些部分。

所以教训是：在执行 npm 更新后，关闭并重新启动所有内容，构建服务器、VSCode 调试器、chrome 实例。