有没有办法让 vue 组件的模板只包含属性的文本？

Question

有没有办法让 vue 组件的模板区域只包含纯文本？当前解决方案（使用 div 将其包裹在文本周围）面临的问题是，我递归地将这些组件与一行中的其他文本片段连接起来，这通常会导致跳转到父容器的下一行，因为没有当前文本片段之前的文本片段右侧留有足够的空间。因此，文本段落应如下所示：客户很重要，有了客户才会跟着客户。全体员工应该高兴但又担心。Curabitur 并不像 Nibh venenatis 那样容易。广告的整个生命或超常的酱汁。对医疗保健提供者的生活进行科学研究的作者。直到周末，没有了夏天，没有了生活的热情。Mauris congue nibh 只需要哀悼的成员。结果如下所示：客户很重要，有了客户才会跟着客户。全体员工应该高兴但又担心。Curabitur 并不像 Nibh venenatis 那样容易。广告的整个生命或超常的酱汁。对医疗保健提供者的生活进行科学研究的作者。直到周末，没有了夏天，没有了生活的热情。Mauris congue nibh 只需要哀悼的成员。考虑到上例中分别有5个文本片段。这就是使用模板标签内的注释来实现所述组件以具体化我的问题的方式：<template>  <div>{{element.text}}</div> <!--  This is how I can do it to this point-->  {{element.text}}            <!--  This is what I would like to do--></template><script>import { Component, Prop, Vue } from 'vue-property-decorator'import TextElement from '@/models/elements/Text'@Componentexport default class TextWrapper extends Vue {  @Prop() element!: TextElement}</script><style scoped></style>

Answer 1

简单的答案是否定的，渲染函数/模板需要根元素。您可以使用<div>内联元素（例如 a）<span>或使用 css 属性设置 div 的display: inline样式来解决此问题，而不是使用 a。

Answer 2

我通过将 css 样式属性传递给父 vue 组件的模板，使用解决方法解决了我最初的意图：

<template>

  <div>

    <span v-for="(line, index) in paragraph.lines" :key="index">

      <p v-if="line.length">

        <span v-for="(lineFragment, index) in line" :key="index">

          <component class="inline-component" :element="lineFragment" :is="lineFragment.type"/>

        </span>

      </p>

    </span>

  </div>

</template>

<script>

import { Component, Prop } from 'vue-property-decorator'

import ElementHook from '@/views/ElementHook.vue'

@Component

export default class ParagraphWrapper extends ElementHook {

  @Prop() element!: ParagraphElement

}

</script>

<style scoped>

  .inline-component {

    display: inline;

  }

</style>

ElementHook 组件作为一个基本的抽象类，它导入所有可以通过 `:is="lineFragment.type" 显示的子组件（例如 TextWrapper 组件的“text”）。

如果想要确保段落仍然围绕父容器对象的边框，您需要考虑添加white-space: pre-wrap;到 SFC 底部定义的 css 类。

Answer 3

Vue 组件模板应该具有 DOM 中存在的根元素。通常使用div或包装元素。span这很少是一个问题，因为可以设置根元素的样式以适应布局。

vue-fragment插件提供了React.FragmentVue 中的功能。它基本上是在安装时解开根元素。由于它是一种黑客攻击，因此它可能无法在所有情况下都按预期工作。

渲染函数可用于通过_v内部方法渲染文本节点。它使用未记录的 API 表明它也是一种黑客攻击。