15.VUE---插槽slot

---

1.插槽的理解

根据自己看的博客，CSDN，引用其他博主，来理解插槽。
    插槽的目的在于，是组件更具有扩展性。举个栗子，电脑预留的usb接口，可以用来连接多种外部设备，耳机、音响、U盘等等，使得更具有扩展性。插槽slot的作用正是如此，例如，组件中的一个地方，默认情况下为button，而在使用的时候，我们有需求需扩展为span,扩展为input，这时候我们就需要使用到插槽。
    Q:假如父组件需要在子组件内放一些DOM元素，那么这些DOM是显示呢还是不显示呢？
    默认情况下是不会显示的，如下图所示，页面并没有显示父组件增加的我是魔鬼 元素内容。那么我执意要加DOM元素到子组件上该怎么实现呢？这就用到了slot插槽，使用slot这个标签可以将父组件放在子组件的内容，放到它想显示的地方

<div id="app">  
  <children>  
    <span>我是魔鬼</span>  
    <!--上面这行不会显示-->  
  </children>  
</div>  
<script>  
  var vm = new Vue({  
      el: '#app',  
      components: {  
         children: {   
         template: "<h1>我是子组件</h1>"  
       }  
     }  
  });  
</script>  

2.solt插槽的使用

<div id="app">
    <my-link>百度</my-link>
    <my-link>知乎</my-link>
    <my-link><i>小米</i></my-link>
    <my-link></my-link>
    <p><i>aaa</i></p>
    <hr>
</div>
<template id="t1">
    <div>
        <a href="https://www.baidu.com">
            <!--插槽标签，插槽内可以包含任意内容或者HTML标签-->
            <!--slot标签内给定的内容为插槽的默认值-->
            <slot>slots标签</slot>
            <!--内部也可以插入其他文本-->
            hello world
        </a>
    </div>
</template>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{
            'my-link':{
                template:"#t1",
            },
            layout:{
                template: "#t2",
            }
        }
    });
</script>

3.具名插槽

当子组件的功能复杂时，子组件的插槽可能并非是一个。比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？

这时候，我们就需要给slot指定一个name属性，也就是具名插槽。
注意
1.指定插槽位置，需要template标签来实现
2.当模板中出现多个插槽的时候，可以给插槽加一个name属性进行区分
3.插槽name的默认值为default,并且在调用组件时候，会自动优先向没有name的插槽中填充内容
4.如果存在多个没有name的插槽，或者name相同的插槽，则按照顺序填充最上面的插槽

<div id="app">
    <layout>
        <!--指定插槽位置，需要template标签来实现-->
        <!--缩写：v-slot：可以改为#-->
        <template #foot>
            <h3>我是底部内容</h3>
        </template>
        <template v-slot:head>
            <h3>我是头部内容</h3>
        </template>
            <h3>我是身体内容</h3>
    </layout>
</div>
<template id="t2">
    <div>
        <!--当模板中出现多个插槽的时候，可以给插槽加一个name属性进行区分-->
        <header>
            <slot name="head"></slot>
        </header>
        <div>
            <!--1.插槽name的默认值为default,并且在调用组件时候，
            	会自动优先向没有name的插槽中填充内容
            	2.如果存在多个没有name的插槽，或者name相同的插槽，
            	则按照顺序填充最上面的插槽-->
            <slot></slot>
        </div>
        <footer>
            <slot name="foot"></slot>
        </footer>
    </div>
</template>