如何在渲染函数中使用 v-slider 的插槽追加？

Question

众所周知，我们可以使用scopedslots来像这样替换 v-select 的插槽 'item' 或 v-slider 的插槽 'thumb-label' ：

scopedSlots: {
    item: (props) => {
        if (this.$scopedSlots.item) {
            return this.$scopedSlots.item({
                test: 'works',
                item: props.item
            })
        }
    }
},

所以我们可以使用slot来替换组件的item外观。

但是当我们想以某种方式替换 vuetify 的 v-slider 的 'append' 插槽时，它不起作用：

scopedSlots: {
    append: (props) => {
        if (this.$scopedSlots.append) {
            return this.$scopedSlots.append({
                test: 'works',
                item: props.item
            })
        }
    }
},

它与普通插槽和作用域插槽不同吗？

如果我们在模板中使用它，我们只需使用 v-slot:append 来替换插槽的外观：

<v-slider>
    <template v-slot:append>
        works
    </template>
</v-slider>

如何在渲染函数中使用这个插槽？ https://codepen.io/radiorz/pen/BaQeBOj

Answer 1

Vuetify 仅在 it finds append or append-outer in $slots, but Vue only copies scopedSlots into $slots when the value has a proxy property, which is an internal flag set for v-slot 时生成 append 插槽。

一个 hacky 解决方法是在 scopedSlots.append 值上设置这个 proxy 标志：

const makeSlot = fn => {
  fn.proxy = true // workaround to copy into $slots
  return fn
}

const SliderWithSlot = {
  name: "SliderWithSlot",
  props: {},
  render(createElement) {
    return createElement("v-slider", {
      scopedSlots: {
        append: makeSlot(() => createElement('span', 'hello world')),
      }
    }
  }
}

demo

如何在渲染函数中使用 v-slider 的插槽追加？

How to use the slot append of v-slider in render function?

vue.js

vuetify.js