Vue组件化高级--slot插槽

一.slot插槽的基本使用

组件的插槽：

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

如何封装合适？抽取共性，保留不同

• 最好的封装方式就是将共性抽取到组件中，将不同保留为插槽
• 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容

二.slot的基本使用

1. 插槽的基本使用：在template内部定义<slot></slot>标签
2. 插槽的默认值：<slot>默认值</slot>
3. 如果在父模板中，有多个值同时放入到组件中进行替换，将会一起作为替换元素

<div id="app">  
        <cpn><span>哈哈哈</span></cpn> // 用span替换template中slot插槽里内容
        <cpn><i>hehehe</i></cpn>
        <cpn></cpn>
    </div>
    
    <template id="cpn">
    <div>
        <h1>我是标题</h1>
        <slot><button>按钮</button></slot> // 插槽，默认值为一个button标签
    </div>
    </template>
    
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <script>

     //(父组件)
     var app = new Vue({
         el: "#app",
         data:{
         },
         components:{
             cpn:{
                 template: "#cpn",
                     }
                 }
     })
    </script>

三.具名插槽

针对于template中含有多个slot的情况

<div id="app">  
        <cpn>
            <span slot="center">标题</span> //通过slot="name"的方式，来决定替换哪个插槽
            <button slot="left">返回</button>
        </cpn> 
        
    </div>
    
    <template id="cpn">
    <div>
        <slot name="left"><span>左边</span></slot> // 为slot标签添加name，来区别
        <slot name="center"><span>中间</span></slot> 
        <slot name="right"><span>右边</span></slot> 
    </div>
    </template>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <script>

     //(父组件)
     var app = new Vue({
         el: "#app",
         data:{
         },
         components:{
             cpn:{
                 template: "#cpn",
                     }
                 }
     })
    </script>

• 为slot标签添加name，来区别
• 通过slot="name"的方式，来决定替换哪个插槽