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

【问题标题】：How to change VueJS's <slot> content before component creation如何在创建组件之前更改 VueJS 的 <slot> 内容
【发布时间】：2018-09-17 03:22:16
【问题描述】：

我有一个 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 的 slot，这样如果 slot 包含单词“title”，那么 slot 将包含在 <h1> 中，从而导致

<h1>as a title</h1>

如果槽包含“段落”，那么槽将被<p>包围，从而导致

<p>as a paragraph</p>

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

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案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
  }
}

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

【讨论】：

【解决方案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()
    }
}

【讨论】：