javascript - 如何在创建组件之前更改 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

如果您使用字符串 prop 而不是插槽，这会更容易实现，但是如果内容很长，那么在模板中使用该组件可能会变得困惑。

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

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

上述渲染函数仅在默认插槽只有一个文本子项的情况下有效(我不知道您的要求超出了问题中提出的范围)。