h 函数中怎么写 template 占位符

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1325 天前的主题，其中的信息可能已经有所发展或是发生改变。

各位吴彦祖们，h 函数中怎么写 template 占位符

第 1 条附言 · 2021-04-01 11:18:37 +08:00

Fragment 确实可以占位
新的问题又来了: h 函数中怎么写具名插槽, 比如这样 `<template v-slot:header>xxx</template>`

第 2 条附言 · 2021-04-01 14:25:14 +08:00

首先感谢各位大佬指点

总结一下:

1、h 函数中写 template 占位符

import { Fragment } from "vue"
h(Fragment, {}, [])

2、h 函数中写具名插槽, 比如这样 <template v-slot:header>xxx</template>

h(HelloWorld, null, {
 default: () => h('div', null, 'default'),
 header: () => h('div', null, 'header xx')
 })

3、JSX 中写具名插槽

setup() {
  const slotsTemp = {
    default: () => <div>jsx-default</div>,
    dropDown: () => <Fragment>jsx-dropDown</Fragment>
  }

  return () => (
    <div>
      JSX
      <slots v-slots={slotsTemp}></slots>
    </div>
  )
}

slot.vue
<div class="default">
  <slot></slot>
</div>
<div class="dropdown">
  <slot name="dropDown"></slot>
</div>

子组件定义具名插槽: this.$slots.default(); this.$slots.dropDown()

template

占位

函数

吴彦祖

5 条回复 • 2021-04-01 14:12:19 +08:00