插槽

slot

翻译为插槽:
1 在生活中很多地方都有插槽,电脑的USB插槽,插板当中的电源插槽。
2 插槽的目的是让我们原来的设备具备更多的扩展性。
比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。

组件的插槽

组件的插槽也是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么。

1 插槽的基本使用
2 插槽的默认值 -------->一个东西出现多次可用默认来写
3 当多个元素放一个组件中则都会显示

<div id="app">
<cpm><button>按钮1</button></cpm>  //除了template 又添加了button
 <cpm></cpm>                        //就是template里面的
<cpm><p>我是p标签 </p></cpm>
  
</div>
    
</body>
<script>
    const app=new Vue({
        el:"#app",
        data:{},
        methods:{
           
          },
        components:{
            cpm:{
                template:`<div>
                    <h1>我是标题1</h1>
                    <h1>我是标题2</h1>
                    <slot></slot>
                    
                    
                    </div>`,
            }
        }
        
    })

具名插槽

下面是一个导航栏，针对不同的导航栏，布局不一样，所以用具名插槽
左中右都会替换成具体的一个部分
（比如京东页面有很多 搜索框 但是每个搜索框都不尽相同，有需要改动的地方）

<div id="app">
 <cpm></cpm>
 <cpm><button slot="left">返回</button></cpm>
 <cpm><span slot="center">首页</span></cpm>
  
</div>
    
</body>
<script>
    const app=new Vue({
        el:"#app",
        data:{},
        methods:{
           
          },
        components:{
            cpm:{
                template:`<div>
                    <slot name="left">左边</slot>
                    <slot name="center">中间</slot>
                    <slot name="right">右边</slot>
                    
                    
                    
                    </div>`
            }
        }
        
    })

作用域插槽后面续更，有点难！