vue具名插槽

具名插槽

　　具有名字的插槽slot使用 中的 "name" 屬性綁定元素

　　注意：

　　　　1，如果沒有匹配到 則放到匿名的插槽中

　　　　2，具名插槽的渲染順序，完全取決於模板，而不是取決於父組件中元素的順序

<div id="app">
    <!--這里的所有組件標簽中嵌套的內容會替換掉slot 如果不傳值 則使用 slot 中的默認值 -->
    <!-- 這里標簽內部的slot屬性會去匹配相同名字的插槽 -->
    <slot-box><div slot="head">slot內容</div></slot-box>
  </div>
  <script>
    Vue.component('slot-box',{
      // slot就是模板里面的插槽，里面可以有內容，如果沒有傳遞值，那么里面的內容為默認內容；
      // slot里面的name就是插槽的名字，
      template:`<div><h1>這是插槽的內容：</h1><slot name="head">默認內容</slot><h2>后面內容</h2></div>`
    })
    const vm = new Vue({
      el:'#app'
    })
</script>