如何在Vue3在setup语法糖的h函数使用插槽？

我想将下面代码转化成用h函数书写，前提是使用setup语法糖的形式。

这是我尝试的两种写法。但是不行

百思不得其解，有大佬知道正确的写法吗？

setup vue3 h

阅读 9.1k

3 个回答

未觉雨声

✓ 已被采纳

在 <script setup> 中如何使用 slots：文档

但是如果你想要在 <script setup> 中使用像普通 <script> 中的 setup 那样返回一个函数作为渲染函数，那答案是不能的。

可以参考一下这里。

归根到底你要想清楚你为什么会产生需要在 <script setup> 中编写渲染函数的需求。

kkopite

2.1k1913

发布于
2022-05-04

看文档

export default {
  props: ['message'],
  setup(props, { slots }) {
    return () => [
      // default slot:
      // <div><slot /></div>
      h('div', slots.default()),

      // named slot:
      // <div><slot name="footer" :text="message" /></div>
      h(
        'div',
        slots.footer({
          text: props.message
        })
      )
    ]
  }
}

我刚意外的发现，我这么写是是可以渲染出来的。之前不行可能是存在缓存问题。。。

<template>
  <div class="z-tab">
    <Headers />
    <Body />
    <!-- <div :class="['tab_body', { 'border-card': type === 'border-card' }]">
      <slot />
    </div> -->
  </div>
</template>

<script lang="ts" setup name="Tab">
import { useSlots, h } from "vue";
const slots = useSlots();
const Body = () => {
  return h(
    "div",
    {
      class: { tab_body: true, "border-card": props.type === "border-card" },
    },
    {
      default: () => [slots.default()],
    }
  );
};

import TabHeader from "./tab-header/index.vue";
const Headers = () => {
  return h(TabHeader, {
    "tab-list": tabList,
    value: props.modelValue,
    type: props.type,
    onUpdateValue: getUpdateValue,
  });
};
</script>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

如何在Vue3在setup语法糖的h函数使用插槽？

你尚未登录，登录后可以

vue3 实现一个列表水平居中的同时，可以左右滑动？

为什么在.env中定义的变量没有生效?

vue3项目yarn install 安装依赖时报错怎么解决？

怎么用Vue3和Element-Plus及手动写组件模仿一个网站的全站内容，要模仿的很像？

使用echart报Cannot read properties of undefined (reading 'type')报错，该如何解决？

yarn安装包后报错，怎么解决？

为何vue3的vue-router中的RouterLink包裹的element-plus的el-image会在鼠标悬浮在图片的时候在图片底部多出部分颜色块？