Vue查漏补缺——template标签和具名插槽

Vue查漏补缺——template标签和具名插槽

• 组件html内容：

<script type="text/x-template" id="cCop">
    <div>
      <h1>cCop组件</h1>
      <slot name="test">默认</slot>
    </div>
  </script>

<div id="app">
    <c-cop>
      <template slot="test"><!-- 会将内部标签插入到error具名插槽内 -->
        <span>error2！</span>
        <span>error1！</span>
      </template>
    </c-cop>
  </div>

实际效果：

所以，template标签的作用即将多个同级标签插入具名插槽。