- 作用域插槽续
此例的用意主要是介绍作用域插槽的用法
1.允许组件自定义应该如何渲染列表每一项。
2.作用域插槽的使用场景就是既可以复用子组件的slot，又可以使slot内容不一致。
<div id="app">
// 这里的:books是my-list组件props中的books
<my-list :books="books">
// "books"是vue的app实例中data的一个属性
<template slot="book" scope="props">
<li>{{ props.bookName }}</li>
</template>
</my-list>
</div>
<script>
Vue.component('my-list', {
props: ['books'],
template: ' \
<ul> \
<slot name="book" v-for="book in books" :book-name="book.name"></slot> \
</ul> \
'
});
var app = new Vue({
el: '#app',
data: {
books: [
{ name: '《Vue.js实战》'},
{ name: '《JavaScript语音精粹》'},
{ name: '《JavaScript高级程序设计》'},
]
}
})
</script>
props回顾
<div id="app">
<ceshi :message="parentMessage"></ceshi>
</div>
<script>
Vue.component('ceshi', {
// 声明在prop中的变量可以引用父元素的数据
props: ['message'],
template: '<div>{{ message }}</div>'
});
var app = new Vue({
el: '#app',
data: {
parentMessage: 'Hello World'
}
})
</script>
