作用域插槽的使用(四个作用域的区别)

大家好，又见面了，我是你们的朋友全栈君。

• 什么是作用域插槽？
  其实就是带数据的插槽。
  父组件可以通过绑定数据传递给子组件，而作用域插槽可以通过子组件绑定数据传递给父组件。

• 作用域的使用场景：
  既可以复用子组件的slot，又可以使slot内容不一致！

• 代码如下：

 <div id="app">
        <div>
            <emp-list :emps="empList">
                <!-- 
                    【 slot-scope 】：主要目的是跟 empName 相联系 
                    【 props 】：作用域插槽
                -->
                <template slot="emp" slot-scope="props">
                    <li>
                        { 
   { 
   props.empname}}
                    </li>
                </template>       
            </emp-list>
        </div>
    </div>

    <template id="empComp">
        <div>
            <h1>列表排布</h1>
            <ul>
                <!-- 【 :empName="emp.name" 】：作用域插槽的属性 -->
                <slot name="emp" v-for="emp in emps" :empName="emp.name"></slot>
            </ul>
        </div>
    </template>   

    <!-- 借助免费的CDN来引入vue.js文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        //局部注册
        var vm=new Vue({ 
   
            el:"#app",
            data:{ 
   
                empList:[{ 
   
                    name:"苹果"
                },{ 
   
                    name:"西瓜"
                },{ 
   
                    name:"芒果"
                }]
            },
            components:{ 
   
                "emp-list":{ 
   
                    props:["emps"],
                    template:"#empComp"  //作为一个id
                }
            }
        });
    </script>

• 效果图如下：