Vue：<tag></tag> vs <tag />

Question

正如我在标题中简洁说明的那样，我想知道在 Vue.js 中编写自闭合标签是否是传统的和/或合法的。

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

问题分为两部分：

• 后一种做法（自闭）做法是否合法？
• 后一种做法（自闭）是传统做法（即被很多人采用）吗？

Answer 1

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

来自 Vue 风格指南。

这是合法的，并且被 vue style guide 强烈推荐。 Vue Style Guide #self-closing components

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> 可以是自闭合标签。