Как изменить содержимое 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

Вы можете использовать $slots (https://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()
    }
}

Answer 2

Этого легче достичь, если вместо слота вы используете реквизит строки, но тогда использование компонента в шаблоне может стать грязным, если содержимое длинное.

Если вы напишите функцию рендеринга вручную, у вас будет больше контроля над тем, как компонент должен быть отрендерен:

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

Вышеприведенная функция рендеринга работает только при условии, что в слоте по умолчанию есть только один дочерний текст (я не знаю, какие у вас требования помимо того, что было представлено в вопросе).