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