官网解释作用

有的时候你希望你提供的组件带有一个可从子组件获取数据的可复用的插槽。

普通的一个demo

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue作用域插槽</title>
        <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
    </head>
    <body>
        <div id="app2">
          <one-demo :items="items"></one-demo>
        </div>
        <script>
            Vue.component('one-demo', {
               
                template: `<ul>
                                <li v-for="item in items" :key="item.id">
								{{item.name}}:{{item.age}}
								</li>
							</ul> `,
                props: [
                    'items'
                ]
            });
            new Vue({
                el: '#app2',
                data: {
                    items: [
                        {id: 1, name: '小小米', age: 24},
                        {id: 2, name: '小小花', age: 22},
                        {id: 3, name: '小红', age: 29},
                        {id: 4, name: '小明', age: 27},
                        {id: 5, name: '小张', age: 37}
                    ]
                }
            });
        </script>
    </body>
</html>

当我们使用ome-demo的时候，传入数据显示的内容是固定的格式的，当我们想改变其中一个显示的格式的时候，我们应该怎么做呢？作用域插槽就有了用武之地！！

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue作用域插槽</title>
        <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
    </head>
    <body>
        <div id="app2">
          <one-demo :items="items">
			  <template scope="lists">
			  <!--定义一个代替插槽内容的模板，scope将模板区域的作用域定义个名字，这个区域就可以访问到子组件传出的数据比如传出的item对象，
			  在这个模板内就可以通过数据重新定义每个li模板渲染的内容
			  比如下方的 如果item对象的age大于26 后方就显示成功人士，当然你可以随意定义内容
			  -->
				{{lists.item.name}}:{{lists.item.age}}
				 <span v-if="lists.item.age >26">成功人士</span>
			  </template>
			</one-demo>
        </div>
        <script>
            Vue.component('one-demo', {
               
                template: `<ul>
                                <li v-for="item in items" :key="item.id">
                               <!--插入一个作用域插槽，把v-for中的item对象传进去
                                插槽内就会有个作用域，父组件通过特定的模式可以
                                访问到传进来的数据比如item对象-->
								 <slot :item="item">
								{{item.name}}:{{item.age}}
								</slot>
								</li>
							</ul> `,
                props: [
                    'items'
                ]
            });
            new Vue({
                el: '#app2',
                data: {
                    items: [
                        {id: 1, name: '小小米', age: 24},
                        {id: 2, name: '小小花', age: 22},
                        {id: 3, name: '小红', age: 29},
                        {id: 4, name: '小明', age: 27},
                        {id: 5, name: '小张', age: 37}
                    ]
                }
            });
        </script>
    </body>
</html>

如果什么都不写就按照默认模板显示

暂时理解的就这么多！！

参考

www.cnblogs.com/xiaofenguo/…
vue2.0新增的作用域插槽的应用场景有哪些？ - 书穆白的回答 - 知乎 https://www.zhihu.com/question/57504896/answer/357590963

Vue 作用域插槽

官网解释作用

普通的一个demo

参考