Bagaimana untuk mendapatkan aksara baris baharu (\n) dalam kandungan slot Vue 3?

Question

Saya cuba memindahkan komponen Vue 2 ke Vue 3. Idea ini seperti "ln2br" Vue (sebenarnya "ln2p").

Jadi...

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

sepatutnya memaparkan:

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

---

Ini adalah komponen saya yang berfungsi MyLinebreaker.vue untuk Vue 2 Kod:

<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 berubah dalam Vue 3 jadi saya cuba menulis semula lines pengiraan saya:

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

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

Tetapi ia menjadi salah (semua baris dalam satu baris) kerana .children 不包含 n aksara.

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

Jadi, bagaimana untuk mendapatkan kandungan teks char dalam Vue 3n?

Answer 1

akan compilerOptions.whitespace 更改为 preserve dalam Vue, seperti yang berkaitan di sini. < /p>

app.config.compilerOptions.whitespace = 'preserve'

Untuk butiran lanjut, lihat dokumentasi Vue 3: https://v3.vuejs.org/api/application-config.html#compileroptions-whitespace