脚本宝典收集整理的这篇文章主要介绍了何为vue.js文档片段（vue.js fragment instance)?，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

what's fragment instance?

封装navbar-part，内容如下：

<a class="navbar-brand" href="{{href}}" v-if="this.type == 'logo'">
 <slot></slot>
</a>
<!-- nav -->
<ul class="nav navbar-nav" v-if="this.type == 'nav'">
  <slot></slot>
</ul>
<form class="navbar-form" v-if="this.type == 'search'">
</form>
<ul class="nav navbar-nav" v-if="this.type == 'dropdown'">
</ul>

在调用此组件时，使用的是：

<navbar>
   <navbar-part type="logo" href="#logo">Logo</navbar-part>

然而，总是发现vue报警告：

Attribute href is ignored on component navbar-part because the component is a fragment instance.

满头雾水啊：什么是文档片段，为什么是文档片段就得忽略href？

原来把文档标签加上一个外套，就不是文档片段了：
<div>

  <a class="navbar-brand" href="{{href}}" v-if="this.type == 'logo'">
   <slot></slot>
  </a>
  <!-- nav -->
  <ul class="nav navbar-nav" v-if="this.type == 'nav'">
    <slot></slot>
  </ul>
  <form class="navbar-form" v-if="this.type == 'search'">
  </form>
  <ul class="nav navbar-nav" v-if="this.type == 'dropdown'">
  </ul>

</div>

解决了问题，就容易想通了。vue认为我的template内的文档没有一个单根（root),所以如果把href带入的话，应该给那个根标签呢，毕竟有form、a、ul都可能。vue不知道怎么办，因此只有忽略并报警。

现在套了一个div，href加入到div时无意义的，此时可以使用{{href}}，明确的指定到a标签即可。

ref: http://forum.vuejs.org/topic/...

脚本宝典总结

以上是脚本宝典为你收集整理的何为vue.js文档片段（vue.js fragment instance)?全部内容，希望文章能够帮你解决何为vue.js文档片段（vue.js fragment instance)?所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。