你真的会使用v-slot么，安排~

在子组件中，使用特殊的元素就可以为子组件开启一个插槽。
该插槽插入什么内容取决于父组件如何使用。
我们通过一个简单的例子，来给子组件定义一个插槽：
中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容

写vue组件要这么使用v-slot

v-slot简介

Vue 代码中的 slot 是什么，简单来说就是插槽。 <slot> 元素作为组件模板之中的内容分发插槽，传入内容后 <slot> 元素自身将被替换。

上面这句是官方解释，可能一样不知道 slot 指的是什么，那么就来看看在 Vue 中，什么时候你需要用到 slot 。我自己理解你可以给他理解成一个占位。

举例：一个组件的展示层你需要做到大体结构固定，但其内的部分结构可变，样式表现不固定。例如 Button 中是否显示 icon ，或者 Modal 框的中间内容展示区域的变化等，要通过子组件自己实现是不可能的。组件并不直接支持 HTML DOM 结构的传递，此时就可以通过使用 slot 作为 HTML 结构的传递入口来解决问题。

如何使用插槽v-slot

我们学习vue官方文档，可以看到，在2.6.0版本，slot 和 slot-scope 这两个目前已被废弃、尚未移除，仍在文档中可进行使用。

插槽类型

• 默认插槽
• 具名插槽
• 作用域插槽

默认插槽

子组件 先写一个子组件，子组件留下slot“占位”

<template>
  <div class="content">
    <!--&lt;!&ndash; 默认插槽 &ndash;&gt;-->
    <header class="text">
      <!--&lt;!&ndash; slot 的后备内容：为一个插槽设置具体后备（默认）内容是很有用的，当父组件不添加任何插槽内容时，默认渲染该后备内容的值。 &ndash;&gt;-->
      <slot>默认值</slot>
    </header>
  </div>
</template>

在写父组件之前，先把子组件的script源码放在这

<script>
export default {
  name: 'child',
  data () {
   return {
      user: {
        title: '测试title',
        name: '测试name'
      }
    }
  },
  methods: {
    testClick () {
      // 子组件通用方法，可传递给父组件复用
      alert('123')
    }
  }
}
</script>

父组件 父组件：任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。当子组件只有默认插槽时， <v-slot> 标签可以直接用在组件上，也就是独占默认插槽的写法

// 父组件 默认插槽
<template> 
    <div class="container"> 
    \<!-- 默认插槽--> 
        <child> 
            任意内容 
            <template>内容</template>
            中间内容 
            <!-- <template v-slot:default>但如果你定义了 default 之后，其他内容就不会出现了，原理同上，不能重复定义</template> --> </child> 
            <!-- 独占默认插槽的缩写 --> 
            <child v-slot="slotProps"> 
             当只有默认插槽时，此为独占默认插槽的缩写<br> 如果组件中有其他具名插槽，这么写会报错<br> slotProps 取的是，子组件标签 slot 上属性数据的集合 
      </child> 
     </div> 
  </template>

具名插槽

当需要使用多个插槽时，为 <slot> 元素添加 name 属性，来区分不同的插槽，当不填写 name 时，默认为 default 默认插槽。 子组件

<template>
    <div class="content"> 
    <!-- 具名插槽 --> 
        <main class="text">
        <slot name="main"></slot> 
        </main> 
    <footer class="text"> 
    <slot name="footer"></slot> 
    </footer> </div> 
</template>

父组件

<template>

  <div class="container">
    <!--&lt;!&ndash; 具名插槽使用 &ndash;&gt;-->
    <child>
      <template v-slot:main>
        <a href="https://www.zcygov.cn" target="_blank">导航</a>
      </template>
     <template #footer>页脚（具名插槽的缩写#）</template>
      <template #footer>
        <!--&lt;!&ndash;  v-slot 重复定义同样的 name 后只会加载最后一个定义的插槽内容 &ndash;&gt;-->
        v-slot只会添加在一个 template 上面
      </template>
   </child>
  </div>
</template>

作用域插槽

作用于插槽，其实说白了就是“可以传参的插槽”，怎么理解了，是指如果跟想让父组件访问到子组件里面的数据，可以将绑定在 <slot> 元素上的特性称为插槽 Prop ，当然也可以传递一些 Function。 子组件

<template>
  <div class="content">
    <!-- 作用域插槽 -->
    <footer class="text">
      <slot name="footer" :user="user" :testClick="testClick">
        {{ user.name }}
      </slot>
    </footer>
  </div>
</template>

父组件

<template>
  <div class="container">
    <!-- 作用域插槽，以及解构插槽 Prop 的写法 -->
    <child>
      <template #footer="slotProps">
        {{slotProps.user.title}}
        <button @click="slotProps.testClick">点我</button>
      </template>
      <template #footer="{user,testClick}">
        {{user.title}}<br>
        此为解构插槽prop<br>
        <!-- 子组件中的通用方法，可传递给父组件复用 -->
        <button @click="testClick">点我</button>
      </template>
    </child>
  </div>
</template>

example2

子组件

<slot name="left">我是一个插槽默认内容</slot>
<slot name="center">我是二个插槽默认内容</slot>
<slot name="right">我是三个插槽默认内容</slot>
 <slot>我是四个插槽默认内容</slot>

插槽的名字现在通过 v-slot:slotName 这种形式

 <template v-slot:left>
              <p>111</p>
           </template>
           <template v-slot:center>
              <p>222</p>
           </template>
           <template v-slot:right>
            <p>333</p>
           </template>
           <template>
            <p>444</p>
</template>

还要提一嘴，v-slot有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #

前端路漫漫其修远兮，吾将上下而求索，一起加油，学习前端吧~ 我是圈圈，看我沸点可以入群~