使用 vuetify 中的 VAutocomplete 和渲染功能（作用域插槽）答案

【问题标题】：Using VAutocomplete from vuetify with render function (scoped slot)使用 vuetify 中的 VAutocomplete 和渲染功能（作用域插槽）
【发布时间】：2021-06-23 15:50:02
【问题描述】：

我正在尝试在渲染函数中使用自动完成组件。当我尝试使用组件的 scopedSlots 时，它对我不起作用。我的代码：

  import { VAutocomplete } from 'vuetify/lib'

  export default {
    render (h) {
      return h(VAutocomplete, {
        scopedSlots: {
          label: () => h('h1', 'lol'),
          'append-item': () => h('p', 'Last item')
        },
      })
    },
  }

我尝试使用此帖子上的答案Vuetify VMenu with render function

我尝试时的答案是有效的，但是当我将它应用于自动完成时，它在我尝试过的插槽中对我不起作用。我做错了什么？

【问题讨论】：

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

label 不是作用域插槽，您必须这样做：

h(VAutocomplete, [
  h('h1', { slot: 'label' }, 'lol')
])

【讨论】：

Label 是一个道具，但也是一个作用域插槽。我在示例代码中使用了它，因为我想让它尽可能简单。 vuetifyjs.com/en/api/v-autocomplete/#slots
它不是一个作用域插槽（相信我，我写的）。在模板中现在没有作用域之间的区别，但渲染函数仍然必须使用slot 用于非作用域插槽。
您介意解释一下为什么是非作用域插槽吗？没看懂