Vue - 如何添加到组件的道具

【问题标题】：Vue - how to add 
 to component's propVue - 如何添加到组件的道具
【发布时间】：2022-08-24 20:51:17
【问题描述】：

我想使用但是当我这样做时，我得到一个错误。

有没有人有办法解决吗？

代码：

<template>
  <section class=\"w-screen h-screen bg-slate-700 grid place-items-center\">
    <div class=\"mb-12\">
      <div class=\"text-8xl\">Title</div>
      <div class=\"m-8 text-center text-3xl\">
        <Writer
          :array=\"[
            \'Code 1\',
            \'line 1&#10; line 2\',
          ]\"
          :typeSpeed=\"100\"
          :iterations=\"1\"
        />
      </div>
    </div>
  </section>
</template>

那是一个html实体吗？你是如何在模板中使用道具的？
你能再解释一下吗？此外，包括错误和您尝试过的代码。
你不能在这里使用\\n吗？
不工作;-; @吻你
这取决于你如何在另一边解码它。

标签： vue.js

【解决方案1】：

您可以在字符串中使用 \n 字符，然后在消费元素中使用 css white-space 属性。

这是一个工作示例。

在 Writer 父级上，使用 \n 字符作为新行，例如：

<Writer
  :array="[
    'Code 1',
    'line 1\n line 2',
   ]"
   :typeSpeed="100"
   :iterations="1"
/>

在 Writer 组件中，您应该将 white-space 属性添加到您的 css 元素中，例如：

<template>
  <div 
    class="break-lines" 
    v-for="arrayElement in array">
      {{ array Element }} 
    </div>
</template>
<style>
  .break-lines {
    white-space: break-lines;
  }
</style>

这应该可以解决问题；）

【讨论】：