Vue 组件文本仅部分传递到插槽，其余部分出现在外部 div

Posted 2023-02-23

【中文标题】Vue 组件文本仅部分传递到插槽，其余部分出现在外部 div

【英文标题】：Vue Component text only partially passes to slot, the rest appears in outer div

【发布时间】：2021-12-18 07:58:39

【问题描述】：

我有一个带有插槽的包装格式化 vue 组件，以及两个使用它的组件。传递列表结构时，它可以正常工作，就像直接使用包装 div 时一样，但是在尝试传递简单字符串时会失败。字符串的第一个单词按预期呈现，但其余单词出现在开头的 div 中。我尝试将 mustached 道具包装在额外的 html 标记中，但内容仍然无法正确呈现。

显示文本组件

<template>
  <two-col-row-display
    :field="field"
    :fieldcss="fieldcss"
    :valuecss="valuecss"
  >
     value 
  </two-col-row-display>
</template>

<script>
    export default 
        props: 
          field: 
            type: String,
            required: true,
          ,
          fieldcss: 
            type: String,
          ,
          value: 
            type: String,
            default: '',
          ,
          valuecss: 
            type: String,
          ,
        ,
    
</script>

两列行显示封装组件

<template>
  <div class="gridwrap">
    <div class="row field" :class="fieldcss">
       field + ':' 
    </div>
    <div class="row value" :class="valuecss">
      <slot></slot>
    </div>
  </div>
</template>

<script>
    export default 
        props: 
          field: 
            type: String,
          ,
          fieldcss: 
            type: String,
          ,
          valuecss: 
            type: String,
          ,
        ,
    
</script>

使用的显示文本

<display-text
    field="Description"
    value= $recipe->description 
></display-text>

但它只输出描述“全部”的第一部分。 “配方”描述的其余部分作为包装 div 的属性输出。 输出html

<div class="gridwrap" of the recipe>
    <div class="row field"> Description: </div>
    <div class="row value"> All </div>
</div>

直接使用包装组件按预期工作，但我不想直接使用该组件。

<two-col-row-display
    field="Description???"
  > $recipe->description 
</two-col-row-display>

为显示文本组件输出所需的结果

<div class="gridwrap">
    <div class="row field"> Description???: </div>
    <div class="row value">All of the recipe </div>
</div>

如何修改 display-text 组件以正确呈现插槽中的文本？

【参考方案1】：

我忽略了将传递给 value 属性的数据用引号引起来。显示文本组件应填写如下：

<display-text
    field="Description"
    value=" $recipe->description "
></display-text>