下面两个示例是在翻译官方文档过程中,根据官方描述倒推出来的,给大家作为参考。
文档:Vue.js 组件 - 作用域插槽

1
2
3
4
5
6
7
8
9
<div id="app" class="parent">
<child>
<template scope="props">
<p>hello from parent</span>
<p>{{ props.text }}</p>
</template>
</child>
</div>
<script src="http://vuejs.org/js/vue.min.js"></script>
1
2
3
4
5
6
7
8
9
10
11
Vue.component('child', {
template: `
<div class="child">
<slot text="hello from child"></slot>
</div>
`
})
new Vue({
el: '#app',
data: {}
})

示例 1,结果如下:

1
2
3
4
5
6
7
8
<div id="app2" class="parent">
<my-awesome-list :items="items">
<template slot="item" scope="props">
<li class="my-fancy-item">{{ props.text }}</li>
</template>
</my-awesome-list>
</div>
<script src="http://vuejs.org/js/vue.min.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Vue.component('my-awesome-list', {
props: ['items'],
template: `
<ul>
<slot name="item" v-for="item in items" :text="item.text"></slot>
</ul>
`
})
new Vue({
el: '#app2',
data: {
items: [{
text: 'hello'
}, {
text: 'world'
}]
}
})

示例 2,结果如下: