组件标签总是空的吗？答案

【问题标题】：Are component tags always empty?组件标签总是空的吗？
【发布时间】：2017-01-18 19:59:16
【问题描述】：

关于模板解析，the documentation 说：

虽然在简单的情况下它可能会起作用，但您不能依赖在浏览器验证之前扩展自定义元素。例如。 <my-select><option>...</option></my-select> 不是有效的模板即使my-select 组件最终扩展为 <select>...</select>.

这让我想知道：在任何情况下，在自定义元素的开始标签和结束标签之间放置内容是有用的吗？在我看来，这样的内容被丢弃了。也许beforeCompile 代码中的某些内容？

【问题讨论】：

【解决方案1】：

您可以使用<slot> 元素获取组件中的内容。请参阅the docs 了解更多信息。

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

【讨论】：

【解决方案2】：

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

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

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

代替

<table>
  <my-component>

确保您的代码符合 HTML 标准

【讨论】：