vue slot插件的理解：

父組件可以通過在子組件標簽上攜帶屬性傳遞給子組件，子組件通過props接收即可使用。
1.能在子組件標簽之間傳遞信息嗎，當然是可以的，這時子組件通過<slot></slot>標簽接收，所以slot插件的本質是父組件向子組件傳遞展示dom，而非data。

<children><div>我是dom</div></children>

<template>
  <div>
    我是children組件
    <slot></slot>
  </div>
</template>

最終展示

我是children組件
我是dom

2.上面方式也可以理解為父組件給子組件傳遞具體的dom，還有種情況當父組件沒有傳遞dom時，子組件可以設置后備dom，就是父組件傳dom，優(yōu)先渲染父組件傳過來的，反之則渲染自己的，相當于占位了。

<children></children>

<template>
  <div>
    我是children組件
    <slot><div>我是dom</div></slot>
  </div>
</template>

最終展示

我是children組件
我是dom

3.上述說明的是單個插槽情況，也即父組件向子組件傳遞dom，這里說明多個插槽情況，父組件可以向子組件對應部位傳遞多個dom，而這些dom可以對應的傳遞給子組件對應位置。

<children>
  <template v-slot:dom1>
    <div>我是dom1</div>
  </template>
  <template v-slot:dom2>
    <div>我是dom2</div>
  </template>
  <template v-slot:dom3>
    <div>我是dom3</div>
  </template>
</children>

<template>
  <div>
    我是children組件
    <slot name="dom1"><div>我是dom1</div></slot>
    <slot name="dom2"><div>我是dom2</div></slot>
    <slot name="dom3"><div>我是dom3</div></slot>
  </div>
</template>

最終展示

我是children組件
我是dom1
我是dom2
我是dom3

4.先總結下，插槽其實就是放在組件里的一種占位符，父組件更改占位符的內容，在多個占位符的情況下，也可以對應更改多個占位符的內容，同時，組件還可以向父組件提供數(shù)據(jù)接口，供父組件選擇性的展示占位符的的數(shù)據(jù)，也即最后要介紹一的一種作用域插槽。

<children>
  <template v-slot:defaule="slotProps">
    <div>我是dom1{{slotProps.user.firstName}}</div>
  </template>
</children>

<template>
  <div>
    我是children組件
    <slot :user="user"><div>我是dom1{{user.lastName}}</div> 
   </slot>
  </div>
</template>

data() {
    return {
      user: {
        firstName: 'zhang',
        lastName: 'san
      }
    }
  }

最終展示

我是dom1zhang

這里需要注意的是為什么需要用slotProps，因為插槽傳過來的是一個大對象，所以需要slotProps轉一下。

{ "user": { "firstName": "zhang", "lastName": "san" } }

當然你也可以對象解構一下。這樣使用。

<children>
  <template v-slot:defaule="{user}">
    <div>我是dom1{{user.firstName}}</div>
  </template>
</children>

當只有一個默認插槽時，還可以簡寫。

<children v-slot="{user}">
  <div>我是dom1{{user.firstName}}</div>
</children>

5.插槽使用
插槽是對公共組件的進一步公共抽象，以前的公共組件只是同一業(yè)務上的代碼抽象，可面對公共組件里需要解決的差一點可以用插槽去解決。
以前是子組件一股腦展示自己的全部，現(xiàn)在是子組件交出部分權力讓父組件去填充或替換，反之就用自己的。
現(xiàn)在可以試著這樣想頁面，最開始按基本的布局搭好架子，放好插槽占位，然后具體結構根據(jù)業(yè)務需要填充，即在業(yè)務組件上寫結構，當發(fā)現(xiàn)結構可能會根據(jù)不同業(yè)務變化時繼續(xù)寫插槽占位，由上一級的組件提供具體業(yè)務內容，自此向上開發(fā)。
這里面實際上帶開發(fā)哲學的味道，一種是有了頁面去拆分抽象自上而下的開發(fā)，另一種是只有結構一點點往上堆疊自下往上的開發(fā)。
自下而上的開發(fā)有點向后端的接口，為頁面就行接口實現(xiàn)類，這樣在可復用的同時也對代碼進行了規(guī)范。
原子性的組件只能重復寫，除非是借助低代碼平臺來組裝頁面。