Vuetify，工具提示:什么是“开启"?和“属性"为了? [英] Vuetify, tooltips: what are "on" and "attrs" for?

问题描述

我寻找工具提示"在 Vuetify 文档中，我找到了这个例子:

I looked for "Tooltip" in the Vuetify documentation, and I found this example:

<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 有什么用?为什么它们是强制性的?

What are on and attrs for? And why are they mandatory?

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

Also, is this the correct way to listen for the click event?

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

推荐答案

我可以解释一下这意味着什么，但我认为这个视频更好地解释了我让你有时间它解释了 v-和属性

I could explain myself what that means, but I consider that this video explains it a lot better I let you the time where it stars explaining the utility of v-on and attrs

只需查看透明包装

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

总结

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

更多信息:https://vuejs.org/v2/api/#v-on

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

$attrs: Stores the attributes setted in the parent component, you can reuse them in a inner component

更多信息:https://vuejs.org/v2/api/#inheritAttrs

除了视频中显示的内容之外，您还可以找到其他用法，但透明包装是一个常见用例.

You can find other usages besides of what is shown in the video, but transparent wrappers are a common use case.

这篇关于Vuetify，工具提示:什么是“开启"?和“属性"为了?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！