v-toolbar
のVuetifyのサンプルコード を見ると、v-slot:activator="{ on }"
の目的は何ですか?例えば:
<template v-slot:activator="{ on }">
<v-toolbar-title v-on="on">
<span>All</span>
<v-icon dark>arrow_drop_down</v-icon>
</v-toolbar-title>
</template>
<script>
export default {
data: () => ({
items: [
'All', 'Family', 'Friends', 'Coworkers'
]
})
}
</script>
私の知る限り、on
はどこでも定義された変数ではないため、これがどのように機能するかはわかりません。プロジェクトで試してみると、Internet Explorerが<template v-slot:activator="{ on }">
でエラーをスローしますが、削除するとページが表示されます。
この例を参照している可能性があります。
<v-toolbar color="grey darken-1" dark>
<v-menu :Nudge-width="100">
<template v-slot:activator="{ on }">
<v-toolbar-title v-on="on">
<span>All</span>
<v-icon dark>arrow_drop_down</v-icon>
</v-toolbar-title>
</template>
...
</v-menu>
</v-toolbar>
次の行は、activator
という名前の scoped slot を宣言し、VMenu
という名前のプロパティを含むスコープオブジェクト(on
から)が提供されています。
<template v-slot:activator="{ on }">
これは、スコープオブジェクトで destructuring syntax を使用しますが、 IEはサポートしていません 。
IEの場合、スコープオブジェクト自体からon
を逆参照する必要があります。
<template v-slot:activator="scope">
<v-toolbar-title v-on="scope.on">
しかし、idealソリューションIMOは、 Vue CLI 生成されたプロジェクトを使用します。これには、Babelが含まれます target ブラウザーに必要な変換/ポリフィルを自動的に含めるように事前設定( @vue/babel-preset-app
)します。この場合、 babel-plugin-transform-es2015-destructuring
がビルド中に自動的に適用されます。
activator
スロットの詳細VMenu
を使用すると、特定のイベント(activator
など)でメニューをアクティブ化/開くコンポーネントを含むclick
という名前のスロット付きテンプレートを指定できます。 VMenu
は、これらのイベントのリスナーを提供します オブジェクトを介して 、activator
スロットに渡されます:
<v-menu>
<template v-slot:activator="scopeDataFromVMenu">
<!-- slot content goes here -->
</template>
</v-menu>
スロットのコンテンツは、次のようにVMenu
のイベントリスナーにアクセスできます。
<v-menu>
<template v-slot:activator="scopeDataFromVMenu">
<button v-on="scopeDataFromVMenu.on">Click</button>
</template>
</v-menu>
読みやすさを向上させるために、スコープ付きデータをテンプレートで destructured にすることもできます。
<!-- equivalent to above -->
<v-menu>
<template v-slot:activator="{ on }">
<button v-on="on">Click</button>
</template>
</v-menu>
スコープオブジェクトのリスナーは、<button>
に v-on
のオブジェクト構文で渡されます。これにより、1つ以上のイベント/リスナーのペアがバインドされます。要素。このon
の値について:
{
click: activatorClickHandler // activatorClickHandler is an internal VMenu mixin
}
...ボタンのクリックハンドラはVMenu
メソッドにバインドされています。
元の質問は「オン」オブジェクトを理解することに関するものだと思います。ここで最もよく説明されています:
https://github.com/vuetifyjs/vuetify/issues/6866
基本的に「オン」は、アクティベーターから渡されたプロップです。 v-on = "on"が行うことは、それをコンポーネントにバインドすることです。 「on」自体は、アクティベーターから渡されるすべてのイベントリスナーです。