Vue组件slot仅部分传递内容 剩余文本出现在外层div如何修复

问题原因 #

你调用display-text组件时给value属性传值的写法不符合HTML规范：未加引号的HTML属性值会在遇到第一个空格时自动截断，后面的内容会被浏览器识别为独立的无值属性，这就是剩余文本跑到外层div标签属性里的核心原因。你直接调用two-col-row-display时是把插值内容放在插槽（标签内部）而非属性中，所以不会触发属性截断问题。

修复步骤 #

1. 修正组件调用的传值写法 #

将原调用代码：

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

修改为带动态绑定+引号包裹的写法，后端输出的字符串要保证是合法的JS字符串值：

<display-text
    field="Description"
    :value="'{{ $recipe->description }}'"
></display-text>

如果内容包含单引号等特殊字符，建议用框架自带的JSON序列化方法处理，避免转义错误（以Laravel为例）：

<display-text
    field="Description"
    :value={{ Js::from($recipe->description) }}
></display-text>

2. 可选兜底优化 #

为了避免文本节点直接作为插槽内容的潜在解析异常，可以给display-text组件的插槽内容包裹一层无样式行内标签：

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

该修改不影响原有功能表现，还能统一文本的渲染上下文，减少异常场景。

内容的提问来源于stack exchange，提问作者jumki