千峰商城-springboot项目搭建-38-vue具名插槽-CSDN博客

本文链接：https://blog.csdn.net/LYly_B/article/details/125734087

具名插槽：当组件中的插槽数量大于1时，我们需要给组件中的slot标签添加name属性指定插槽的名字。

1.定义组件

Vue.component("page-frame",{
    template:`<div>
    <div id="header" style="width:100%; height:100px; background:pink">
        <slot name="s1"></slot>
    </div>
    <div style="width:100%; height:510px">
        <slot name="s2"></slot>
    </div>
    <div id="footer" style="width:100%; height:40px; background:lightgray">{{cr}}</div>
    </div>`
    ,
    props:["title","cr"]
})

2.引用组件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="container">
            <page-frame title="标题" cr="千峰武汉">

　　　　　　　　　　//定义一个模板，填充到组件的name=s1的插槽
                <template slot="s1">
                    <button type="button">嘿嘿</button>
                </template>

　　　　　　　　　　//定义一个模板，填充到组件的name=s1的插槽
                <template slot="s2">
                    <button type="button">哈哈</button>
                </template>
                
            </page-frame>
        </div>
        
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/my-components.js" ></script>
        <script type="text/javascript">
            
            var vm = new Vue({
                el:"#container"
                
            });
        </script>
    </body>
</html>