vue2,动态生成slot （jsx）

一些特殊场景， 可能不确定我们的插槽有多少个， 需要放在哪里， 这个时候动态jsx 比较好使

使用

<lslot text="我[[slot1]]中间有个插槽">
  <input v-model="value1" style="width: 100px; margin: 0 10px" slot="slot1">
</lslot>

使用正则匹配[[]] 内字段， 进行替换渲染

     const name = matchList[i].replace('[[', '').replace(']]', '')

for (let i = 0; i < textArray.length; i++) {
       elList.push(textArray[i])
       if (i < matchList.length) {
         const name = matchList[i].replace('[[', '').replace(']]', '')
         if (_this.scopedSlots && _this.scopedSlots[name]) {
           elList.push(_this.scopedSlots[name]())
         }
       }
     }

scopedSlots

image.png image.png

结果

image.png

最后

• 使用正则找到标记
• 使用数据拼接 元素

记录一下~