4-7作用域插槽 · 武功秘籍大全

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作用域插槽</title> <script src="vue.js"></script> </head> <body> <div id="root"> <child> <template slot="slot1" slot-scope="propsss"> <h1>{{propsss.item}}--hello</h1> </template> <template slot="slot2" slot-scope="propsss"> <li>{{propsss.item}}--hello</li> </template> </child> </div> <script> Vue.component('child', { data() { return { list: [1, 2, 3, 4] } }, template: `<div> <ul>  <slot name="slot1" v-for="item of list" :item='item'></slot> <slot name="slot2" v-for="item of list" :item='item'></slot> </ul> </div>`, }); var vm = new Vue({ el: '#root' }); </script> </body> </html> ~~~