Vue.js 组件删除同级标记。特征？

Question

在学习 Vue 的过程中，我想知道我遇到的一些行为。我有我的主要标记，并找到了一个将标记的一部分变成组件的用例。但是，当我将组件与其余标记（不是组件）一起添加到容器时，该标记将被删除，仅保留组件标记。这是一项功能吗？

<div id="container">
  <Component />
  
  <div class="some-html">
    ...
  </div>
</div>

安装应用程序后，<div class="some-html"> 将被删除。在我的例子中，这个标记最终将成为一个组件，但对于原型设计，我希望我可以将组件与非组件混合在一起。我目前的解决方法是将组件包装在 <div>.

中

编辑此实例通过 webpack 使用单个文件组件运行。使用答案中的建议，我在组件上使用自关闭标签时删除了挂载功能。这是标记的样子（徽章是组件的名称）：

<div class="row"> 是组件的兄弟：

Answer 1

tl:博士

使用 in-DOM 模板时，不要使用自闭合标签。而不是 <component /> 使用 <component></component>

这只是一种预感，但根据给出的线索，我会说您正在使用 in-DOM 模板。您直接在 index.html 中编写模板 - Vue 将您放置在要安装到的元素中的所有内容用作模板 - 在本例中为 #container

in-DOM 模板的问题是浏览器在执行任何 JavaScript 之前解析 HTML 并强制执行 HTML 规范定义的任何规则。

其中一些在 Vue 文档中有解释 - DOM Template Parsing Caveats

那里没有解释但恕我直言导致问题的描述是，在 HTML5 规范中，仅允许在“空”元素上使用自闭合标签（空元素是那些可能永远不包含任何内容的元素 -如 br、img 等）-参见这个 SO 问题-Are (non-void) self-closing tags valid in HTML5?

结果是你的模板是这样呈现给 Vue 的：

<div id="container">
  <component>
    <div class="some-html">
      ...
    </div>
  </component>
</div>

您可以通过注释掉 $mount('#container') 调用、在浏览器中加载页面并检查页面来轻松检查...

并且因为您的 Component 不使用 default slot，所以 <component> 中的所有内容根本不会呈现...