我正在嘗試將 Vue 2 元件遷移到 Vue 3。這個想法就像 Vue 的“ln2br”(實際上是“ln2p”)。
所以...
<my-linebreaker> This is the line 1. This is the line 2. This is the line 3. </my-linebreaker>
應該要渲染:
<div> <p> This is the line 1.</p> <p> This is the line 2.</p> <p> This is the line 3.</p> </div>
這是我的工作元件 MyLinebreaker.vue
的Vue 2程式碼:
<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 在 Vue 3 中發生了變化,因此我嘗試重寫我的 lines
計算結果:
<script> export default { computed: { lines () { const slot = this.$slots.default const text = slot ? slot()[0].children : '' return text.split('\n') } } } </script>
但它渲染錯誤(所有行都在一行中),因為 .children
不包含 \n
字元。
<div> <p> This is the line 1. This is the line 2. This is the line 3.</p> </div>
那麼,如何在Vue 3中取得 \n
char 的文字內容?
在 Vue 中將
compilerOptions.whitespace
改為preserve
,如此處相關。有關更多詳細信息,請參閱Vue 3 文件:https://v3.vuejs.org/api/application-config.html#compileroptions-whitespace