组件标签是否总是空的?

时间:2016-09-11 02:46:55

标签: vue.js vue-component

关于模板解析,the documentation说:

  

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

这让我想知道:在任何情况下,在自定义元素的开始和结束标记之间包含内容是否有用?在我看来,这样的内容被扔掉了。也许是beforeCompile代码中的某些内容?

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

它不会被扔掉。正如约瑟夫所说,您可以使用www.website.com/page2插入它。您只需确保不创建无效的HTML结构。

您可以使用<slot>属性来处理需要对组件使用无效HTML结构的情况。对于表格会发生很多事情,您可以使用:

is

而不是

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

确保您的代码符合HTML标准