javascript - 名为 slot "activator"的 Vue JS Vuetify 菜单未绑定(bind)到模板，而是转到 "default"

Question

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

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

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

我已将我的应用程序简化到最基本的结构(最初我有动态组件、表单、API 等)，所以我将其缩减为顶级 v-app 元素内的一个 v-menu，并删除了所有路由器、商店和其他插件。它尽可能简单，但仍然不起作用。 fiddle 和我的本地应用程序之间唯一的区别是构建系统。

我还尝试更改/删除插槽 Prop 和 on绑定(bind)到按钮，这确实修改了命名插槽在 Vuetify(或 Vue)中的内部表示方式。然而，带或不带 props 的版本都不能正确绑定(bind)命名槽。

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

我还确保我包装在 <v-app></v-app> 中(但这是在我安装 Vuetify 插件时发生的)如其他 SO 中所述。

我还读了this SO我发现这对调试很有用。

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

我可能尝试了很多其他的东西，(最初我只是遇到了 on 的问题，因为 v-on 没有被定义，但这是由于这个潜在的问题)。

这些是我的简化文件——它们都很标准:

App.vue(带/不带事件绑定(bind) Prop )

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

主要.js

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',
})

index.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 相比之下，在调试相同的函数时，我看到了 activator $scopeSlots 下的 Node 当我包含 v-on=on 事件绑定(bind)时，在 $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 实例。