在上一篇講了插槽的基本使用,但是現在又有了新的需求了,一個組件中有3個插槽,只想替換中間的插槽,另外兩個默認即可,那該如何替換呢?具名插槽就派上用場了,說簡單點就是給插槽取個名字,當插入元素的時候說明要插入的是哪個插槽即可,代碼如下:
<body> <div id="app"> <ccomponent> <span slot="center">插槽全部替換了</span> </ccomponent> </div> </body> <template id="tem"> <div> <slot> <h1>我是插槽1</h1> </slot> <slot name="center"> <h1>我是插槽2</h1> </slot> <slot> <h1>我是插槽3</h1> </slot> </div> </template>
當<span>不指定slot屬性時,默認是插入到所有的slot標簽