<template> <div> <h1>This is myList page</h1> <ul> <slot v-for="book in books" :bookName="book.name"></slot> </ul> </div> </template> <script> export default { props:{ books:{ type: Array, default: function(){ return [] } } }, mounted(){ console.log(this.books) } } </script>
其实上面的案例可直接在父组件中for循环就好，此处只是作为演示slot的作用域插槽；
实际开发中作用域插槽的使用场景主要为：既可以复用子组件的slot，又可以使slot内容不一致。
4.访问slot
vue2.0提供了$slot方法来访问slot
此处代码以**“具名slot（同时使用多个插槽）”**的代码为例，修改一下子组件childComponment.vue
export default { name: "childComponment", data(){ return { message: '' } }, mounted(){ let header = this.$slots.header let main = this.$slots.default let footer = this.$slots.footer console.log(header) console.log(main) console.log(footer) console.log(footer[0].elm.innerHTML) } };
打印结果：
其中elm的内容为插槽内容，结构如下：
