插槽是用来传递复杂的内容，类似方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="app"> <todo-list> <todo-item v-for="item in classList" :title="item.title" :prize="item.prize"> <!--分发内容，类似java里面的aop吧 //2.5版本以后的插槽用法--> <template v-slot:pre-icon> <span>前置插槽</span> </template> <!--2.5版本之前用法--> <span slot="suf-icon">后置插槽</span> </todo-item> </todo-list> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component(‘todo-item‘, { props: { title: String, prize: { type: Number, default: 40 }, }, //默认插槽 template: `<li> <slot name="pre-icon"></slot> <button>删除</button> 课程名:{{title}} 价格:{{prize}} <slot name="suf-icon"></slot> <slot><span>默认插槽</span></slot> </li>`, data: function () { return { } }, methods: { } }) Vue.component(‘todo-list‘, { template: ` <ul> <slot ></slot> </ul> `, data: function () { return { } } }) var vm = new Vue({ el: ‘.app‘, data: { message: ‘hello world‘, showMessage: false, title: "是否删除", classList: [ { title: ‘课程1‘, prize: 50 }, { title: ‘课程2‘, prize: 80 } ] }, methods:{ }, }) </script> </body> </html>
原文：https://www.cnblogs.com/RoronoaZoro/p/11965245.html