Vue作用域插槽

首先简单说下为什么要使用作用域插槽，有时候需要组件带有一个可从子组件获取数据的可复用的插槽。

下面还是通过例子来讲解

一个简单的todo-list组件

        Vue.component('todo-list', {            props: ['text'],            template: `            <ul>

                <li v-for="(item, index) of text" :key="index">

                    <slot :text="item"></slot>

                </li>

            </ul>

            `,

        });

我们通过slot元素，使用v-bind的形式绑定属性传递给父元素，父元素通过slot-scope属性来接收属性，下面是上面的一个运用

        var vm = new Vue({

            el: '#box',

            data: {

                arr: ['css', 'html', 'javascript'],

            },

            template: `

            <div id="box">

                <todo-list :text="arr">

                    <template slot-scope="boses">

                        <h2>这是一个标题</h2>

                        <p>{{boses.text}}</p>

                    </template>

            </todo-list>

            </div>`,

        });

这里我通过template的slot-scope属性接收solt元素传递的text属性，并在p标签内部引用他，这里提示一下slot-scope的名称可以随意起，引用的时候通过.名称的方式引用。

如果环境ES6+，可以通过解构赋值来简写

<div id="box">

                <todo-list :text="arr">

                    <template slot-scope="{text}">

                        <h2>这是一个标题</h2>

                        <p>{{text}}</p>

                    </template>

            </todo-list>

  </div>`

Vue2.5.0+，slot-scope不再限制在<template>元素上使用，而可以用在插槽内的任何元素或组件上。