render函数创建插槽

Question

render创建，sfc填充
请教下老师，如果我想使用render函数为组件自身创建一个插槽位的话，我下面的做法有问题吗？
如下代码可以达到一个默认插槽，插槽数据为默认数据的效果吗

1. 下面的代码我主要是想创建一个含有默认插槽，默认插槽默认内容为默认数据的组件

<script>
export default {
  name: 'index',
  data () {
    return {
      list: [
        1, 2, 3
      ]
    }
  },
  render (h) {
    return h('div', [
      this.list.map((item, index) => {
        if (item % 2 === 1) {
          return h('div', {
            key: index,
            ref: 'test',
            refInFor: true
          }, 'test')
        }
      }),
      h('slot', {}, '默认数据') // 这里创建插槽，感觉写得有问题
    ])
  }
}
</script>

2. 这里是父组件的代码

<template>
  <div>
    <component-demo1> // demo1的代码，请看3
      *************
      <template #jsx>
        <component-demo2 /> // demo2的代码，请看4
      </template>
    </component-demo1>
    <component-demo3>  // 这里的demo3插件就是1部分的代码，这样写达不到覆盖插槽默认内容的效果
      <div>1111</div>
    </component-demo3>
  </div>
</template>

3. demo1代码

<template>
  <div ref="demo3">
    <div>sfc组件</div>
    <slot>                      // 有默认内容的默认插槽
      <div>-----------------</div>
    </slot>
    <slot name="jsx"></slot>  // 具名插槽
  </div>
</template>

4. demo2代码

export default {
  name: 'ComponentDemo2',
  render (h) {
    return h('div', {
      slot: 'jsx' // 老师我比较想知道这个’slot‘属性到底有啥用
    }, 'slot')
  }
}

上面的代码demo1和demo2是没有问题的，这里面我的疑问主要是

1. renderFunction 第二个参数对象中的slot属性有什么用
2. 如果我想不这么写

 <template #jsx>
    <component-demo2 />
  </template>

仅仅通过<component-demo2 />来填充具名插槽jsx应该如何实现

demo3的代码是有问题的，渲染出来还是显示’默认数据‘

1. 那么通过createElement如何创建插槽和具名插槽呢

请老师指点迷津，谢谢啦，老师过年好

Answer 1

张轩 2021-02-02 22:42:22

同学你好 1 h 的第二个参数是 节点的属性，你这里就是在节点上添加一个 slot="jsx" 的属性没有实际意义。

1 通过 h 创建 slot，需要使用 this.$slots 这个组件实例上的全局属性

return h('div', this.$slots.default())
//返回 <div><slot></slot></div>
return h('div', this.$slots.test())
// 返回<div><slot name="test"></slot></div>

怎样添加 slot 的默认值，我也在研究，文档中没有说明，https://v3.vuejs.org/guide/render-function.html#slots

• 提问者 有没有没被占用的昵称 #1

  老师vue官方文档中渲染函数 & JSX -> 深入数据对象 -> #深入数据对象中有这么一个提示
  // 如果组件是其它组件的子组件，需为插槽指定名称
    slot: 'name-of-slot',
  请问，这里的slot属性有什么用

• 提问者 有没有没被占用的昵称 #2

  https://cn.vuejs.org/v2/guide/render-function.html