自闭合标签，例如 <tag />，在 Vue 中合法吗？

Question

在 Vue 文档中，我看到了开始和结束标签，但我在其他地方看到作者将组件编写为自结束标签，例如<some-component />

自关闭标签的做法在 Vue 中合法吗？

Answer 1

来自 Vue 风格指南：

没有内容的组件应在单个文件中自关闭 组件、字符串模板和 JSX - 但从不在 DOM 模板中。

这是合法的，并且被 Vue 风格指南强烈推荐： Vue 风格指南 #self 关闭组件

Answer 2

这两个问题都在上面得到了解答。但是，我想指出自关闭标签中没有内容的确切含义。

1. 当我们使用<div><p>Something</p></div>，这里的标签<p>是内容，因此，我们不能使用div 作为自关闭标签。

2. 类似地，在 Vue JS 组件的情况下，你也可以在组件标签中包含内容，例如，<MyComponent><p>Something Else</p></MyComponent>. 然后，在<MyComponent>的组件定义中，您必须包含以呈现传递到任何使用<MyComponent>的内容。

3. 如果您不打算从<MyComponent>传递任何内容，即如果您在组件的定义中没有<slot>标记，那么您的<MyComponent>可以是自闭合标记。