vue.js 以编程方式呈现命名的scopedSlot

p5cysglq  于 2022-11-17  发布在  Vue.js
关注(0)|答案(1)|浏览(112)

我想把下面的模板移到我的组件的render函数中,但是我不知道该怎么做。
这是我的模板:

<template>
  <div>
      <slot name="item" v-for="item in filteredItems" :item="item">
        {{ item.title }}
      </slot>
  </div>
</template>

这是我的组件:

export default {
  props: {
    items: {
      type: Array,
      required: true,
    },
    search: {
      type: String,
      default: ""
    }
  },
  methods: {
    filterByTitle(item) {
      if (!("title" in item)) { return false; }
      return item.title.includes(this.search);
    }
  },
  computed: {
    filteredItems() {
      if (this.search.length === "") {
        return this.items;
      }
      return this.items.filter(this.filterByTitle);
    }
  },
  render: function(h) {
    // How can I transform the template so that it finds its place here? 
    return h('div', ...);
  }
};

我先谢谢你了。

kqlmhetl

kqlmhetl1#

要渲染作用域插槽,您可以使用$scopedSlots
示例代码:

...
  render(h) {
    return h(
      'div',
      this.filteredItems.map(item => {
        let slot = this.$scopedSlots[item.title]
        return slot ? slot(item) : item.title
      })
    )
  }
...

JSFiddle

相关问题