V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
binhb
V2EX  ›  Vue.js

h 函数中怎么写 template 占位符

  •  
  •   binhb ·
    ZingerLittleBee · 2021-03-31 20:10:06 +08:00 via iPhone · 2091 次点击
    这是一个创建于 1093 天前的主题,其中的信息可能已经有所发展或是发生改变。

    各位吴彦祖们,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()

    5 条回复    2021-04-01 14:12:19 +08:00
    cereschen
        1
    cereschen  
       2021-03-31 20:40:27 +08:00
    import { Fragment } from "vue"
    binhb
        2
    binhb  
    OP
       2021-03-31 20:44:54 +08:00 via iPhone
    @cereschen 感谢感谢,这就去试试,用来写具名插槽
    ubbcou
        3
    ubbcou  
       2021-04-01 14:03:20 +08:00
    h(HelloWorld, null, {
    default: () => h('div', null, 'default'),
    header: () => h('div', null, 'header xx')
    })
    ubbcou
        4
    ubbcou  
       2021-04-01 14:06:50 +08:00
    binhb
        5
    binhb  
    OP
       2021-04-01 14:12:19 +08:00
    @ubbcou #3 正解, 感谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1033 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 22:25 · PVG 06:25 · LAX 15:25 · JFK 18:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.