Vue 官网介绍作用域插槽时，
在 2.5.0+，
slot-scope能被用在任意元素或组件中而不再局限于<template>。作用域插槽更典型的用例是在列表组件中，允许使用者自定义如何渲染列表的每一项：
例子：
<my-awesome-list :items="items"> <!-- 作用域插槽也可以是具名的 --> <li slot="item" slot-scope="props" class="my-fancy-item"> {{ props.text }} </li> </my-awesome-list>
列表组件的模板：
<ul> <slot name="item" v-for="item in items" :text="item.text"> <!-- 这里写入备用内容 --> </slot> </ul>
其实到这里，我自己倒腾了下，一开始没有弄出来，后来理了理思绪才弄出来，完整代码是这样：
<parent-component v-bind:items="items"></parent-component>
window.onload = function() { Vue.component(‘parent-component‘, { template: ` <my-awesome-list :items="items"> <!-- 作用域插槽也可以是具名的 --> <li slot="item" slot-scope="props" > {{ props.text }} </li> </my-awesome-list> `, props: [‘items‘] }); Vue.component(‘my-awesome-list‘, { template: ` <ul> <slot name="item" v-for="item in items" :text="item.text"> <!-- 这里写入备用内容 --> </slot> </ul> `, props: [‘items‘] }); new Vue({ el: ‘#app‘, data: { items: [ { text: ‘111‘ }, { text: ‘222‘ }, { text: ‘333‘ } ] } }); };
当然，也可以这样：
<my-awesome-list :items="items"> <!-- 作用域插槽也可以是具名的 --> <li slot="item" slot-scope="props"> {{ props.text }} </li> </my-awesome-list>
window.onload = function() { Vue.component(‘my-awesome-list‘, { template: ` <ul> <slot name="item" v-for="item in items" :text="item.text"> <!-- 这里写入备用内容 --> </slot> </ul> `, props:[‘items‘] }); new Vue({ el: ‘#app‘, data: { items: [ { text: ‘111‘ }, { text: ‘222‘ }, { text: ‘333‘ } ] } }); };
参考文档：