解读vuetify代码片段 v-slot:activator="{ on, attrs }"

前述

在vuetify中menu组件的如下写法有些地方跟之前熟悉的element-ui有很大的不同,为了解剖翻译这段代码，花了将近3个小时的时间。所以记录下来，一来加深记忆，二来在不可期许的以后，可以帮助到有缘的朋友。

<template>
  <div class="text-center">
    <v-menu offset-y>
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          color="primary"
          dark
          v-bind="attrs"
          v-on="on"
        >
          Dropdown
        </v-btn>
      </template>
      <v-list>
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>

    <template v-slot:activator="{ on, attrs }">
    //activator 是组件属性里面挂载着数据
    // 翻译过来就是   var { on, attrs } = activator属性 里面挂载的数据

    <v-btn
        color="primary"
        dark
        v-bind="attrs"
        v-on="on"
    >
    // v-on = "on"     "v-on"== "监听"    "on" == "父祖件activator里面挂载的数据" 
//例如 on == { click:function(){xxx}, keyup:function() {} }则 翻译为监听 b-btn组件里面的click事件和keyup事件