Vuetify 工具提示未显示在 DOM 中答案

【问题标题】：Vuetify tooltip doesn't show up in the DOMVuetify 工具提示未显示在 DOM 中
【发布时间】：2020-01-05 01:17:27
【问题描述】：

在我的组件模板中粘贴docs' example 时：

<v-tooltip bottom>
  <template v-slot:activator="{ on }">
    <v-btn color="primary" dark v-on="on">Button</v-btn>
  </template>
  <span>Tooltip</span>
</v-tooltip>

...我在 DOM 中得到了这个：

<span data-v-26084dc2="" class="v-tooltip v-tooltip--top"></span>

这就是我在 main.js 中导入 Vuetify 的方式：

import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);

使用Vue 2.5.17 和Vuetify 1.3.15

【问题讨论】：

但提供的文档适用于2.x 版本
糟糕...1.x 的文档不再可用？ 2.x 需要我不想安装的 Vue Cli 3
v-slot 是在 Vue 2.6.0 中引入的。您需要在 2.5.17 中使用较旧的插槽语法。 vuejs.org/v2/guide/components-slots.html#Deprecated-Syntax
谢谢。虽然使用slot 而不是v-slot 仍然不起作用

标签： vue.js vuetify.js

【解决方案1】：

v-slot 是在 Vue 2.6.0 中引入的。您需要使用旧版插槽使用 2.5.17 的语法并直接在元素上使用它

vuejs.org/v2/guide/components-slots.html#Deprecated-Syntax

slot 属性也可以直接用在普通元素上

<v-tooltip bottom>
   <v-btn slot="activator" color="primary" dark>Button</v-btn>
   <span>Tooltip</span>
</v-tooltip>

【讨论】：