具名插槽
具有名字的插槽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>