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>