Vue 测试版本：Vue.js v2.5.13
Vue 官网介绍作用域插槽时，
例子：
<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' }
]
}
});
};参考文档：