相关疑难解决方法(0)

查看Vuetify示例代码v-toolbar的目的是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时，Internet Explorer会引发错误<template v-slot:activator="{ on }">，但是如果将其删除，则会呈现页面。

所以我有这个<Dialog />扩展 vuetify<v-dialog />默认值的组件。

为了避免必须将onClose方法传递给DialogContent组件，我宁愿它$emit('close')。

但我无法让我的插槽监听此事件。:(

这是代码：

// Dialog.vue

<template>
  <v-dialog
    v-bind="$attrs"
    v-model="dialog"
  >
    <!-- forward other slots -->
    <template
      v-for="(_, slot) of otherSlots"
      v-slot:[slot]="scope"
    >
      <slot :name="slot" v-bind="scope" />
    </template>

    <template v-slot:default="{ on, attrs }">
      <slot name="default" v-on="on" v-bind="attrs" @close="onClose" />
    </template>
  </v-dialog>

</template>

<script>
  import {reject} from '@/utils/object';

  export default {
    inheritAttrs: false,
    computed: {
      otherSlots() {
        return reject(this.$scopedSlots, 'default');
      },
    },
    data() {
      return {
        dialog: false, …