slot插槽：调取组件时候，把写在组件的中间部分的内容获取到，放置到组件的某个位置（具体位置根据需求），借助这个方法，可以让当前组件按具备更强的扩展性

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>珠峰培训</title>
    6. </head>
    7. <body>
    8. <!--父调用子组件的方法-->
    9. <div id="app">
    10.     <!--这里放的内容均属于父级当前模板的 只有属性名是属于组件的-->
    11.     <modal m="1">
    12.         <a href="http://www.zhufengpeixun.cn">去珠峰</a>
    13.         <p slot="content" @click="fn">亲确认删除吗</p>
    14.         <h1 slot="title">是否删除？</h1>
    15.         <a href="http://www.zhufengpeixun.cn">去珠峰</a>
    16.     </modal>
    17. </div>
    18. <!--slot作用 定制模板-->
    19. <!--模板中只能有一个根元素，可以通过元素属性定制模板-->
    20. <!--slot中可以放置一些默认的内容，如果传递了内容则替换掉-->
    21. <!--如果没有名字的标签默认会放置到default中-->
    22. <template id="modal">
    23.     <div>
    24.         <slot name="title">默认标题</slot>
    25.         <slot name="content">默认内容</slot>
    26.         <slot name="default">这是一个默认标题</slot>
    27.     </div>
    28. </template>
    29. <script src="node_modules/vue/dist/vue.js"></script>
    30. <script>
    31.     let modal = {
    32.         template:'#modal',
    33.     };
    34.     let vm = new Vue({
    35.         el:'#app',
    36.         components:{
    37.           modal
    38.         },
    39.         methods:{
    40.             fn(){alert(1)}
    41.         },
    42.         data:{}
    43.     })
    44. </script>
    45. </body>
    46. </html>