slot的使用场景：复用子组件的slot，且slot的内容不同

简单使用案例

子组件

	<div><h1>子组件</h1><slot name="child" msg='德玛西亚'></slot></div>

父组件

	<HelloWorld><p slot-scope='child' slot="child">{{child.msg}}</p></HelloWorld>

在列表中使用（推荐）

子组件

<template><ul><slot name="book" v-for="book in books" :bookName='book.name'></slot></ul>
</template>
<script>export default{props:{books:{type: Array,default: ()=>{return []}}}}
</script>

父组件

<template><div id="app"><HelloWorld :books='books'><template slot='book' slot-scope='props'><li>{{props.bookName}}</li></template></HelloWorld></div>
</template><script>import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld},data() {return {books: [{name: '《三体》'},{name: '《mysql从删库到跑路》'},{name: '《java从入门到放弃》'},{name: '《JavaScript高级程序编程》'}]}},}
</script><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}
</style>