VUE2.0学习记录——作用域插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作用域插槽</title> </head> <body> <div id="app"> <child></child> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component('child',{ data: function () { return { list: [1,2,3,4,5] } }, template: '<div>' + '<ul>' + '<li v-for="item of list">{{item}}</li>' + '</ul>' + '</div>' }); var app = new Vue({ el: '#app' }); </script> </html> 当li本身如何循环是由父组件决定时,就用到了作用域插槽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作用域插槽</title> </head> <body> <div id="app"> <child>