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

我正在尝试使用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

组件？

我无法完全理解问题中描述的问题。这个答案不是为了回答完全原始的问题，而是为了指导将来可能遇到这个问题的用户

我没有使用作用域插槽，而是将

值

道具与

附加

道具结合使用。这个解决方案最终毫无问题地成功了

button(
            {
              attrs: { "data-account-setting": true },
              props: { plain: true, rounded: true, icon: true },
              on: { click: onOpenMenuClick },
            },
            [h(VIcon, ["mdi-account-outline"])]
          ),
          h(
            VMenu,
            {
              props: {
                value: isMenuOpen.value,
                // waiting on answer on SO
                // @see https://stackoverflow.com/questions/67405594/using-vmenu-from-vuetify-with-render-function-scoped-slot
                attach: "[data-account-setting]",
                minWidth: "300px",
                left: true,
                offsetY: true,
                closeOnContentClick: false,
                rounded: true,
              },
              on: {
                input: (value: boolean) => {
                  isMenuOpen.value = value;
                },
              },
            },
            [
              h(VList, { props: { dense: true } }, [
                h(VListItem, { props: { to: { name: "logout" } } }, [
                  h(VListItemTitle, { attrs: { 'data-cy-logout': true } }, ["Logout"]),
                ]),
              ]),
            ]
          ),

---

作用域插槽以

{name:props=>VNode | Array}

的形式通过of

createElement

的第二个参数传递。在您的情况下，

scopedSlots

应该有两个条目：一个用于

activator

，另一个用于

default

：

从“vuetify/lib”导入{VMenu、VList、VListItem、VBtn}
导出默认值{
渲染（h）{
返回h（VMenu{
scopedSlots：{
激活器：道具=>h（VBtn，道具“打开”），
默认值：（）=>h（VList[
h（第1项“项目1”），
h（第1项，“第2项”），
h（第三项），
]),
},
})
}
}

这相当于此模板：

打开
项目1
项目2
项目3

---

今天晚上，你又一次帮助了我。非常感谢你。