javascript - 使用 vuetify 中的 VMenu 和渲染功能（作用域插槽）

Question

我正在尝试使用 Vuetify 的VMenu组件，我希望当用户单击VMenu显示的按钮时。就文档而言，它说我们应该添加一个作用域插槽。使用普通模板它可以工作，但是当我切换到渲染函数方法时，它永远不会渲染按钮。

我一直在关注 Vue 的文档并最终得到：

h(VMenu, { props: { value: isMenuOpen.value } }, [
            h(
              "template",
              {
                scopedSlots: {
                  activator: ({ on, attrs }) => {
                     debugger; // it never reaches this debugger
                     return h(VButton, { on, attrs }, 'click me');
                  }
                },
              },
              []
            ),
            h(VList, [h(VListItem, [h(VListItemTitle, ["Logout"])])]),
          ]),

我也尝试过使用非箭头函数：

scopedSlots: { activator: function({ on, attrs }) {  return h('div', 'click me');  } }

h('div', 'click me')并在非箭头函数和箭头函数中返回一个简单的函数，似乎没有任何效果。

如何将作用域插槽传递activator给VMenu组件？

标签： javascriptvue.jsvuetify.js

Answer 1

作用域插槽通过的第二个参数的scopedSlots属性以. 在您的情况下，应该有两个条目：一个 for ，另一个 for ：createElement{ name: props => VNode | Array<VNode> }scopedSlotsactivatordefault

import { VMenu, VList, VListItem, VBtn } from 'vuetify/lib'

export default {
  render(h) {
    return h(VMenu, {
      scopedSlots: {
        activator: props => h(VBtn, props, 'Open'),
        default: () => h(VList, [
          h(VListItem, 'item 1'),
          h(VListItem, 'item 2'),
          h(VListItem, 'item 3'),
        ]),
      },
    })
  }
}

这相当于这个模板：

<template>
  <v-menu>
    <template v-slot:activator="{ on, attrs }">
      <v-btn v-bind="attrs" v-on="on">Open</v-btn>
    </template>
    <v-list>
      <v-list-item>item 1</v-list-item>
      <v-list-item>item 2</v-list-item>
      <v-list-item>item 3</v-list-item>
    </v-list>
  </v-menu>
</template>

演示