render函数创建插槽

来源:4-8 Dropdown 组件基本功能编码

有没有没被占用的昵称

2021-02-01

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>
  1. 这里是父组件的代码
<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>
  1. demo1代码
<template>
  <div ref="demo3">
    <div>sfc组件</div>
    <slot>                      // 有默认内容的默认插槽
      <div>-----------------</div>
    </slot>
    <slot name="jsx"></slot>  // 具名插槽
  </div>
</template>
  1. 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如何创建插槽和具名插槽呢

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

写回答

1回答

张轩

2021-02-02

同学你好 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

0
2
有没有没被占用的昵称
https://cn.vuejs.org/v2/guide/render-function.html
2021-02-03
共2条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程