如何在 Vue 2 渲染功能中使用插槽？

Posted 2023-02-23

【中文标题】如何在 Vue 2 渲染功能中使用插槽？

【英文标题】：How to use slot in Vue 2 render function?

【发布时间】：2021-04-16 03:29:35

【问题描述】：

我想执行以下操作，但使用 Vue 2 的渲染功能

<template>
  <imported-component>
    <template v-slot:default=" importedFunction ">
       <button @click="importedFunction">Do something</button>
    </template>
  </import-component>
</template>

【参考方案1】：

使用scopedSlots 作为插槽 使用插槽名称（“默认”）加上插槽道具的函数参数 使用on 作为事件处理程序

render(h) 
  return h('imported-component', 
    scopedSlots: 
      default(slotProps) 
        return h('button', 
          on: 
            click: slotProps.importedFunction
          
        , 'Do something')
      
    
  );