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

什么是插槽？

插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot> 表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內容會替換子組件的<slot></slot>標簽。

如下代碼：

1. 在子組件中放一個占位符

2. 在父組件中給這個占位符填充內容：

應用場景

比如你開發一個組件, 里面一些子元素希望是由調用者來定義, 就可以定義slot, 這樣組件只負責核心功能, 其他非核心可以用戶自由定義, 增加組件的靈活性 可擴展性。

匿名插槽、具名插槽

       solt元素可以用一個特殊的特性name來進一步配置如何分發內容。多個插槽可以有不同的名字。這樣可以將父組件模板中 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