在上一篇讲了插槽的基本使用,但是现在又有了新的需求了,一个组件中有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标签