组件标签总是空的吗？

Question

关于模板解析，the documentation 说：

Although in simple cases it might appear to work, you can not rely on custom elements being expanded before browser validation. E.g. <my-select><option>...</option></my-select> is not a valid template even if my-select component eventually expands to <select>...</select>.

这让我想知道：在自定义元素的开始和结束标记之间放置内容是否有用？在我看来，此类内容已被丢弃。也许 beforeCompile 代码中有什么？

Answer 1

您可以使用 <slot> 元素获取组件中的内容。有关详细信息，请参阅 the docs。

顺便说一句，该警告仅适用于 Vue 1.0。在即将发布的 2.0 版本中，模板将在 DOM 之外编译，因此自定义元素将始终在浏览器验证之前展开。

Answer 2

它没有被扔掉。正如 Joseph 所说，您可以使用 <slot> 插入它。您只需确保没有创建无效的 HTML 结构。

您可以使用 is 属性来处理需要对组件使用无效 HTML 结构的情况。这种情况在表格中经常发生，您可以使用：

<table>
  <tr is="my-component">

而不是

<table>
  <my-component>

确保您的代码 HTML 合规

组件标签总是空的吗？

Are component tags always empty?

vue.js

vue-component