Wie erhalte ich ein Zeilenumbruchzeichen (\n) im Vue 3-Slot-Inhalt?

Question

Ich versuche, Vue 2-Komponenten auf Vue 3 zu migrieren. Die Idee ähnelt Vues „ln2br“ (eigentlich „ln2p“).

Also...

<my-linebreaker>
  This is the line 1.
  This is the line 2.
  This is the line 3.
</my-linebreaker>

sollte rendern:

<div>
  <p>  This is the line 1.</p>
  <p>  This is the line 2.</p>
  <p>  This is the line 3.</p>
</div>

---

Dies ist meine Arbeitskomponente MyLinebreaker.vue für Vue 2 Code:

<template>
  <div>
    <p v-for="(line, index) in lines" :key="index">{{ line }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    lines () {
      const slot = this.$slots.default
      const text = slot ? slot[0].text : ''

      return text.split('\n')
    }
  }
}
</script>

Slots API hat sich in Vue 3 geändert, also habe ich versucht, meine lines Berechnung neu zu schreiben:

<script>
export default {
  computed: {
    lines () {
      const slot = this.$slots.default
      const text = slot ? slot()[0].children : ''

      return text.split('\n')
    }
  }
}
</script>

Aber es wird wegen .children 不包含 n Zeichen falsch gerendert (alle Zeilen sind in einer Zeile).

<div>
  <p>  This is the line 1. This is the line 2. This is the line 3.</p>
</div>

Also, wie bekomme ich den Textinhalt von char in Vue 3n?

Answer 1

在 Vue 中将 compilerOptions.whitespace 更改为 preserve，如此处相关。

app.config.compilerOptions.whitespace = 'preserve'

有关更多详细信息，请参阅 Vue 3 文档：https://v3.vuejs.org/api/application-config.html#compileroptions-whitespace