vue中v-slot详解，具名插槽和作用域插槽

1、具名插槽

具名插槽通常用作在指定的位置输出我们的子元素

//组件调用时
<Child>
  <template v-slot:footer>
      //这里v-slot：后边的值与组件内的slot的name属性对应，也就是插槽的名称。
      <div>子组件测试文字</div>
  </template>
</Child>

//书写组件时
<template>
    <div>
        测试文字
        <div>
            <slot name='footer' />
            //这里name的值就是这个插槽的名称。
        </div>
    </div>
</template>

最后可以将元素放在任意位置

2、作用域插槽

作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。

//组件调用
<Child :title="来着父组件的字符串">
   <template v-slot:footer="item">
       <div>{{item.msg}</div>
       <!-- 这里的item是自定义的名字，指代slot那个标签；展示出来的是文字：来着父组件的字符串 -->
   </template>
<Child>

//书写组件时
<template>
   <div>
       <slot name='footer' :msg="title"></slot>
   </div>
</template>

注意事项：
这里需要注意的是item是所有你绑定属性的集合，也就是你写的:msg=“title”会当做item的属性来实现。

item可以改为其它的名称，自定义就好。

3、默认插槽

4、总结

v-slot的出现是为了代替原有的slot和slot-scope
简化了一些复杂的语法。
一句话概括就是v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射。