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

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

如果您手动编写render函数，则可以更好地控制组件的呈现方式：

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

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

2 个答案: