(1). Slot

一个大的组件,可能会由N个小组件组成,而这些小组件就是slot

(2). slot.html

<html>
   <head>
     <title>hello</title>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>

      <div id="app">
        <!-- 使用组件 -->
        <todo>
          <todo-title slot="todo-title" v-bind:title="title"></todo-title>
          <todo-items slot="todo-items" v-for="item in items" v-bind:item="item"></todo-items>
        </todo>
      </div>

      <script>
        Vue.component('todo-title', {
          props:['title'],
          template: '<div>标题</div>'
        });

        Vue.component('todo-items', {
          props:['item'],
          template: '<li></li>'
        });

        Vue.component('todo', {
          template: '<div><slot name="todo-title"></slot><ul><slot name="todo-items"></slot></ul></div>'
        });

        var app = new Vue({
            el: '#app',
            data : {
                title : "用户管理",
                items : [ "添加用户","修改用户","删除用户" ]
            }
        });
      </script>      
   </body>
</html>