vue中插槽的个人理解

在vue中，插槽是一个用的比较多的API，在官方的文档中，在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute，

vue插槽的作用：在vue中实现的一套分发内容的API，将slot元素作为承载内容分发出口。用人话说就是：想要在一个组件标签中添加新的内容，必须在该组件内声明一个slot元素，否则，添加的新内容则不会被渲染。

通常我们会在vue中将各种通用的功能单独拿出来进行封装，以便于后面复用，但是有时候需要复用的组件不是完美契合，这个时候就需要用到插槽，slot可以让用户拓展组件，更好的实现组件的复用。

组件插槽分为三种：

　　1：默认插槽

　　　　使用方法：

　　　　　　子组件：　　　　　　　　　　

<div>
     <p>这里是子组件</p>
     <slot></slot>
</div>

　　       　　　　父组件：

 

<div>
    <!--引用子组件-->
    <myslot>
        <p>这里是父组件</p>//当想在父组件中渲染这一行数据时，必须要在引用的子组件中定义一个slot标签
    </myslot>
</div>

 

　　

最后显示内容：
这里是子组件
这里是父组件　

 

父组件想在引入的组件中显示  <p>这里是父组件</p>，就必须先在子组件中用slot定义一个插槽，用来接收父组件传递的代码，再才能正常的在页面中渲染

　

  2：具名插槽

　　　顾名思义，具名插槽是在slot标签上有一个属性：name，可以将指定的代码放入指定的插槽中

          具体定义如下：

<!--子组件-->
<template>
    <div>
        <hander>
            <!--这里放入name=“hander”的代码段-->
            <slot name="hander"></slot>
        </hander>
        <footer>
             <!--这里放入name=“footer”的代码段-->
             <slot name="footer"></slot>
        </footer>
    </div>
</template>        

　　

<!--父组件-->
<div>
    <p>大家好，这里是父组件</p>
    <template v-slot:hander>
        <span>这里是放入hander中的代码段</span>
    </template>
    <template v-slot:footer>
       <span>这是放在footer中的代码段</span>
    </template>
</div>

　　注意：v-slot指令只能写在template中

                v-slot可以简写为#

　  3：作用域插槽

         作用域插槽主要用于解决的问题是：当父组件向子组件插槽传递模板内容时存在访问子组件数据的问题

           可以看例子：

<!--子组件-->
<template>
    <div>
        <slot>{{user.name}}<slot>
    </div>
</template>
<script>
 export default{
    data(){
       return{
           user:{
                 name:"jay",
                 age:18
             }
        }
    }
}
</script>                                                

　　当父组件引用子组件时，想将子组件中的user.name替换为user.age时，不可以直接在父组件中更改子组件中的user.name，因为在官方文档中，父级模板所有内容都是在父级作用域中编译的，子级模板所有内容都是在子作用域中编译的。

      为了解决子组件的user不能在父组件中使用的问题，我们可以将user用属性绑定的方式传给父组件，父组件用一个自定义名称进行接收

      子组件可以这么写：

<!--子组件-->
<template>
    <div>
        <slot :user="user">{{user.name}}<slot>
    </div>
</template>
<script>
 export default{
    data(){
       return{
           user:{
                 name:"jay",
                 age:18
             }
        }
    }
}
</script>  

　　

      因此，父组件可以这么写：

<template>
    <myslot>
       <template v-slot="slotProps">
　　　　　　{{slotProps.user.age}}
       </template>
    </myslot>
</template>
<script>
import myslot from '@/component/myslot.vue'
export default{
        data(){
            return{}
         },
         components:{
            myslot
        }
    }
</script>    

　　在子组件中，将自己的数据用属性绑定的方式传输给父组件，父组件在template中用v-slot="自定义名"，进行接收，再通过自定义名.进行数据访问。