如何更改 VueJS 的<slot>组件创建前的内容

Question

我有一个 VueJS 组件，

comp.vue ：

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    data () {
      return {

      }
    },
  }
</script>

我把这个 Vue 组件称为任何其他组件：

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

我想在渲染之前更改comp.vue的插槽，这样如果插槽包含单词“title”，那么插槽将被包含在<h1>中，从而导致

<h1>as a title</h1>

如果插槽包含“段落”，则插槽将包含在<p>中，导致

<p>as a paragraph</p>

如何在渲染之前更改组件插槽内容？

Answer 1

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

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

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
  }
}

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

Answer 2

您可以使用$slots ( https://v2.vuejs.org/v2/api/#vm-slots )：

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()
    }
}