前述

在vuetify中menu組件的如下寫(xiě)法有些地方跟之前熟悉的element-ui有很大的不同,為了解剖翻譯這段代碼，花了將近3個(gè)小時(shí)的時(shí)間。所以記錄下來(lái)，一來(lái)加深記憶，二來(lái)在不可期許的以后，可以幫助到有緣的朋友。

<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 是組件屬性里面掛載著數(shù)據(jù)
    // 翻譯過(guò)來(lái)就是   var { on, attrs } = activator屬性 里面掛載的數(shù)據(jù)

    <v-btn
        color="primary"
        dark
        v-bind="attrs"
        v-on="on"
    >
    // v-on = "on"     "v-on"== "監(jiān)聽(tīng)"    "on" == "父祖件activator里面掛載的數(shù)據(jù)" 
//例如 on == { click:function(){xxx}, keyup:function() {} }則 翻譯為監(jiān)聽(tīng) b-btn組件里面的click事件和keyup事件