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

Question

我似乎无法获得Vuetify v菜单可在我的PWA应用程序中使用的示例代码，但它通常可在小提琴中使用（例如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>包装起来（但是在其他SO中也提到了这一点。

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

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

我可能还尝试了很多其他方法（（起初我只是因为{-{1}}出现了问题，因为未定义v-on，但这是由于这个基本问题所致）。

这些是我的简化文件-都很标准：

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

on

main.js

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

plugins / vuetify.js

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

index.html

            

当它运行时，我在import Vue from 'vue' import Vuetify from 'vuetify/lib' import 'vuetify/src/stylus/app.styl' Vue.use(Vuetify, { iconfont: 'md', }) 中设置了一个断点，并且由于未设置任何插槽类型，因此在此处返回null：

node_modules/vuetify/src/components/VMenu/mixins/menu-generators.js

在我的应用中，Chrome调试检查器显示 genActivator: function genActivator() { if (!this.$slots.activator && !this.$scopedSlots.activator) return null; v-btn下的p标签旁边的default应该在自己的下。

相比之下，

在工作中的小提琴中，当调试相同的功能时，当我包含v-on = on事件绑定时，我看到$slot下的activator节点，如果没有，则在$scopeSlots下。而且效果很好。

为什么$slots语句不生效？

Answer 1

在阅读以下答案后：https://stackoverflow.com/a/55268990/209288我发现，较旧的版本（Vue v2.6之前的版本）语法可以在我的精简应用程序中使用，也可以在原始组件中使用。

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

因此，即使我在执行npm更新后在Vui UI中使用了“ Build”选项，我仍然意识到我的应用必须仍在运行旧版本。

我只是停止并重新启动了vue-cli-service serve 命令（在用户界面中），现在一切正常。

所以我想我仍在运行Vue v2.5.22 ，而VSCode的构建只是在热重装了一些零件。

因此，教训是：完成npm更新后，关闭并重新启动所有内容，包括构建服务器，VSCode调试器，chrome实例。