web-dev-qa-db-ja.com

v-slot：activator = "{on}"の意味

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 }">でエラーをスローしますが、削除するとページが表示されます。

vue.jsvuejs2vuetify.js
44
Araw

この例を参照している可能性があります。

<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メソッドにバインドされています。

72
tony19

元の質問は「オン」オブジェクトを理解することに関するものだと思います。ここで最もよく説明されています：

https://github.com/vuetifyjs/vuetify/issues/6866

基本的に「オン」は、アクティベーターから渡されたプロップです。 v-on = "on"が行うことは、それをコンポーネントにバインドすることです。 「on」自体は、アクティベーターから渡されるすべてのイベントリスナーです。

0
PropertyWebBuilder