父组件通过子组件数据，替换插槽数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<comp> </comp>
<comp>
<template slot-scope="slot">
<ul>
<li v-for="book in slot.data">{{book.name}}：{{book.price}}</li>
</ul>
</template>
</comp>
</div>
<template id="comp">
<div id="">
<p>{{message}}</p>
<slot :data="books">
<ul>
<li v-for="book in books">{{book.name}}</li>
</ul>
</slot>
</div>
</template>
<script>
// 子组件
const comp = Vue.extend({
template: '#comp',
data() {
return {
message: 'Hello furong!',
books: [{
name: 'HTML/HTML5基础',
price: 15.5,
},
{
name: '高健壮性CSS',
price: 16.5,
},
{
name: '深入学习JS',
price: 17.5,
},
]
}
},
})
// root
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
},
components: {
comp,
},
})
</script>
</body>
</html>