Vue：<tag> </tag>与<tag>

Question

正如我在标题中简要指出的那样，我想知道在Vue中编写自动关闭标签是否常规和/或合法。

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

。

问题分为两个部分：

• 后一种做法（自动关闭）是否合法？
• 后一种实践（自动关闭）是否常规（即被很多人采用）？

Answer 1

  

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

来自Vue样式指南。

这是合法的，并由vue样式指南强烈推荐。 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>可以是自闭标签。