Vue 中 slot 插槽

什么是插槽：
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

<div id="app">

   <gotos>
       <gotos_title slot="goto_title" v-bind:title="title"></gotos_title>
       <gotos_item slot="goto_item" v-for="item in items" v-bind:items="item"></gotos_item>
   </gotos>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
   Vue.component('gotos',{
       template: '<div>\
                       <slot name="gotos_title"></slot>\
                       <ul>\
                           <slot name="gotos_item"></slot>\
                       </ul>\
                  </div>'
   });

   Vue.component("gotos_title",{
       pops: ['title'],
       template: '<div>{{title}}</div>'
   });

   Vue.component("gotos_item",{
       pops: ['item'],
       template:'<li>{{item}}</li>'
   });

   var vm=new Vue({
       el: "#app",
       data: {
           title: '努力奋斗的结果',
           items: ['暴富','成功','买自己喜欢的一切']
       }
   });
</script>