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,優先渲染父組件傳過來的,反之則渲染自己的,相當于占位了。
<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.先總結下,插槽其實就是放在組件里的一種占位符,父組件更改占位符的內容,在多個占位符的情況下,也可以對應更改多個占位符的內容,同時,組件還可以向父組件提供數據接口,供父組件選擇性的展示占位符的的數據,也即最后要介紹一的一種作用域插槽。
<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.插槽使用
插槽是對公共組件的進一步公共抽象,以前的公共組件只是同一業務上的代碼抽象,可面對公共組件里需要解決的差一點可以用插槽去解決。
以前是子組件一股腦展示自己的全部,現在是子組件交出部分權力讓父組件去填充或替換,反之就用自己的。
現在可以試著這樣想頁面,最開始按基本的布局搭好架子,放好插槽占位,然后具體結構根據業務需要填充,即在業務組件上寫結構,當發現結構可能會根據不同業務變化時繼續寫插槽占位,由上一級的組件提供具體業務內容,自此向上開發。
這里面實際上帶開發哲學的味道,一種是有了頁面去拆分抽象自上而下的開發,另一種是只有結構一點點往上堆疊自下往上的開發。
自下而上的開發有點向后端的接口,為頁面就行接口實現類,這樣在可復用的同時也對代碼進行了規范。
原子性的組件只能重復寫,除非是借助低代碼平臺來組裝頁面。