在需要动态插入的地方使用 <slot>标签，进行绑定需要插入的内容，案例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--view层 模板--> <div id="app"> <todo> <todo-title slot="todo-title" :title="title"></todo-title> <todo-items slot="todo-items" v-for="item in items" :item="item"></todo-items> </todo> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <script> Vue.component("todo",{ template: '<div id="app"> <slot name="todo-title"></slot> <ul> <slot name="todo-items"></slot> </ul> </div>' }); Vue.component("todo-title",{ props: ['title'], template: '<div>{{title}}</div>' }); Vue.component("todo-items",{ props: ['item'], template: '<div>{{item}}</div>' }); var vm = new Vue({ el: "#app", data:{ title: "小鱼儿", items: ["Java","Linux","Web"] } }); </script> </body> </html>