插槽

插槽的基本使用

为什么使用插槽(slot)

插槽的目的是让我们原来的设备具有更多的扩展性
比如电脑的USB我们可以插入更多的设备

组件的插槽

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

 <!-- 
        1.插槽的基本使用     <slot></slot>
        2.插槽的默认值  <slot><button></button></slot>
        3.如果有多个值,同时放入到组件进行替换时,一起作为替换元素
     -->
    <div id="app">
       <cpn></cpn>
       <cpn><span>hahaha</span></cpn>
       <cpn>
           <span>哈哈哈</span>
           <h2>你好呀</h2>
       </cpn>
       </div>
       <template id="cpn">
           <div>
               <h2>
                   我是组件
               </h2>
               <p>我是组件哈哈哈</p>
               <slot><button>按钮</button> </slot>
               <!-- 给插槽一个默认值 -->
           </div>
       </template>
       <script src="./vue.js"></script>
       <script>
           
           const vm = new Vue({
               el:'#app', 
               data:{ 
                 message:'你好呀,李焕英'
               },
               components:{
                   cpn:{
                       template:'#cpn',
                   }
               }
           })
       </script>

具名插槽

当子组件的功能复杂时,子组件的插槽可能并非一个
，所以需要给插槽提供具体的名称

  <div id="app">
       <cpn><button slot="left">标题</button> </cpn>
       </div>
       <template id="cpn">
           <div>
               <slot name="left"><span>左边</span> </slot>
               <slot name="center"><span>中间</span> </slot>
               <slot name="right"><span>右边</span> </slot>
            </div>
       </template>
       <script src="./vue.js"></script>
       <script>
           
           const vm = new Vue({
               el:'#app', 
               data:{ 
                 message:'你好呀,李焕英'
               },
               components:{
                   cpn:{
                       template:'#cpn',
                   }
               }
           })
       </script>

作用域插槽

编译作用域

编译作用域:可以简单的理解为作用域
父组件模板的所有东西都会在父级作用域内编译(用父组件的数据)
子组件模板的所有东西都会在子级作用域内编译(使用子组件的数据);

<div id="app">
        <cpn v-show="isShow"></cpn>
        <!-- 在父组件中使用,则会使用父组件中的isShow -->
        </div>
        <template id="cpn">
            <div>
             <h2>我是子组件</h2>
             <p>我是内容 哈哈哈</p>
             <button v-show="isShow">按钮</button>
             </div>
        </template>
        <script src="./vue.js"></script>
        <script>
            
            const vm = new Vue({
                el:'#app', 
                data:{ 
                  message:'你好呀,李焕英',
                  isShow:true
                },
                components:{
                    cpn:{
                        template:'#cpn',
                        data(){
                            return {
                                isShow:false
                            }
                        }
                    }
                }
            })
        </script>

在该代码中，Vue实例(父组件)中和子组件中都定义了isShow属性，但在父组件使用时，会使用父组件中的isShow属性;在子组件模板中使用时,则使用子组件中的isShow属性

作用域插槽实例

<div id="app">
        <cpn></cpn>
        <!-- 目的是获取子组件中的fruits -->
        <cpn>
            <template slot-scope="slot">
           <span v-for=" item in slot.data">{{item}}-</span>
            </template>
        </cpn>
        </div>
        <template id="cpn">
            <div>
                <slot :data="fruits">
                    <ul>
                        <li v-for=" item in fruits">{{item}} </li>
                    </ul>
                </slot>
              
             </div>
        </template>
        <script src="./vue.js"></script>
        <script>
            
            const vm = new Vue({
                el:'#app', 
                data:{ 
                  message:'你好呀,李焕英',
                  isShow:true
                },
                components:{
                    cpn:{
                        template:'#cpn',
                        data(){
                            return {
                                fruits:['apple','pear','orange']
                            }
                        }
                    }
                }
            })
        </script>

运行结果