Javascript 如何更改VueJS'；s<；插槽>；组件创建前的内容

我有一个VueJS组件

comp.vue：

导出默认值{
数据（）{
返回{
}
},
}

我将此Vue组件称为与其他任何组件一样：

...
<comp>as a title</comp>
<comp>as a paragraph</comp>
...

。。。
作为头衔
作为一段
...

我想在呈现comp.vue之前更改它的插槽，这样，如果插槽包含单词“title”，那么该插槽将包含在

中，从而导致

<h1>as a title</h1>

作为标题

如果插槽中包含“段落”，则插槽将包含在

中，从而导致

<p>as a paragraph</p>

作为段落

---

如何在呈现组件槽内容之前更改组件槽内容？

如果使用字符串道具而不是槽，则更容易实现这一点，但如果内容较长，则在模板中使用组件可能会变得混乱

如果手动编写渲染函数，则可以更好地控制组件的渲染方式：

export default {
  render(h) {
    const slot = this.$slots.default[0]

    return /title/i.test(slot.text)
      ? h('h1', [slot])
      : /paragraph/i.test(slot.text)
        ? h('p', [slot])
        : slot
  }
}

---

上述渲染功能仅在默认插槽只有一个文本子级的情况下才有效（我不知道您的要求超出了问题中提出的要求）。

您可以使用

$slots

（）：

export default {
  render(h) {
    const slot = this.$slots.default[0]

    return /title/i.test(slot.text)
      ? h('h1', [slot])
      : /paragraph/i.test(slot.text)
        ? h('p', [slot])
        : slot
  }
}

export default {
    methods: {
        changeSlotStructure() {
            let slot = this.$slots.default;
            slot.map((x, i) => {
                if(x.text.includes('title')) {
                    this.$slots.default[i].tag = "h1"
                } else if(x.text.includes('paragraph')) {
                    this.$slots.default[i].tag = "p"
                }
            })
        }
    },
    created() {
        this.changeSlotStructure()
    }
}