Vue插槽：slot、slot-scope与指令v-slot使用方法区别讲解

Posted 2023-04-01

参考技术A 不具名插槽

具名插槽

v-slot
v-slot在组件中使用slot进行占位时，也是在slot标签内使用name 属性给slot插槽定义一个名字。但是在html内使用时就有些不同了。需要使用template模板标签，template标签内，使用v-slot指令绑定插槽名，标签内写入需要添加的内容。

作用域插槽：
slot-scope使用：

在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。

在组件使用时，通过slot-scope=“scope”,接收组件中slot标签上绑定的数据。

通过scope.xxx就可以使用绑定数据了

作用域插槽：v-slot的用法

Vue2.6.0中使用v-slot指令取代了特殊特性slot与slot-scope，但是从上述案例可以看出，v-slot在使用时，需要在template标签内，这点大家在应用时要注意。

Vue 作用域插槽slot slot-scope v-slot

什么是插槽？

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

应用场景

比如你开发一个组件, 里面一些子元素希望是由调用者来定义, 就可以定义slot, 这样组件只负责核心功能, 其他非核心可以用户自由定义, 增加组件的灵活性 可扩展性。

匿名插槽、具名插槽

具体不解释，请看官方说明

匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>

作用域插槽

作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

作用域插槽和单个插槽和具名插槽的区别：

因为单个插槽和具名插槽不绑定数据，所以父组件是提供的模板要既包括样式由包括内容的。而作用域插槽，父组件只需要提供一套样式。

下面的例子，父组件提供了显示，没有提供数据，数据使用的都是子组件插槽自己绑定的那个人名数组。

父组件：

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <!--第一次使用：用flex展示数据-->
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>
    </child>

注意：父组件中slot-scope中的变量user就代表了子组件中data对象，user可以是任何命名。

子组件：

<template>
  <div class="child">

    <h3>这里是子组件</h3>
    // 作用域插槽
    <slot  :data="data"></slot>
  </div>
</template>

 export default {
    data: function(){
      return {
        data: [‘zhangsan‘,‘lisi‘,‘wanwu‘,‘zhaoliu‘,‘tianqi‘,‘xiaoba‘]
      }
    }
}

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 官网说明

父组件

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

子组件

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

 

参考地址：https://segmentfault.com/a/1190000012996217?utm_source=tag-newest