Vuetify，工具提示：“on”和“attrs”有什么用？答案

【问题标题】：Vuetify, tooltips: what are "on" and "attrs" for?Vuetify，工具提示：“on”和“attrs”有什么用？
【发布时间】：2020-07-02 17:46:21
【问题描述】：

我在 Vuetify 文档中查找了“Tooltip”，发现了这个例子：

<v-tooltip left>
  <template v-slot:activator="{ on, attrs }">
    <v-btn
      color="primary"
      dark
      v-bind="attrs"
      v-on="on"
    >Left</v-btn>
  </template>
  <span>Left tooltip</span>
</v-tooltip>

on 和 attrs 有什么用？为什么它们是强制性的？

另外，这是监听click 事件的正确方法吗？

<v-tooltip bottom>
  <template v-slot:activator="{ on }">
    <v-btn v-on="{...on, click: onToggle }" icon>
      <v-icon>mdi-eye</v-icon>
    </v-btn>
  </template>
  Show password
</v-tooltip>

【问题讨论】：

标签： vue.js tooltip vuetify.js

【解决方案1】：

我可以解释一下这意味着什么，但我认为这个视频解释得更好我让你有时间解释 v-on 和 attrs 的实用性

只需查看透明包装器

部分

https://youtu.be/7lpemgMhi0k?t=1314

总结

v-on：绑定一系列监听函数

更多内容：https://vuejs.org/v2/api/#v-on

$attrs：存储父组件中设置的属性，可以在内部组件中复用

除了视频中显示的内容之外，您还可以找到其他用法，但transparent wrappers 是一个常见的用例。

【讨论】：

【解决方案2】：

到目前为止，我通过执行v-on="on" 了解父级（v-tooltip 组件）的v-on 事件是子级（v-btn 组件）的事件。

对于v-on 事件的条件“继承”，您可以这样做

<!-- displayTootip is true/false -->
<v-btn
  v-bind="attrs"
  v-on="displayTootip ? on : null"
>Left</v-btn>

对于问题的第二部分，documentation 提供了一个使用 v-model 以编程方式显示工具的示例。

【讨论】：