vue作用域插槽有什么用

這篇文章給大家分享的是有關(guān)vue作用域插槽有什么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

作用域插槽

利用好作用域插槽可以做一些很有意思的事情，比如定義一個基礎(chǔ)布局組件A，只負(fù)責(zé)布局，不管數(shù)據(jù)邏輯，然后另外定義一個組件B負(fù)責(zé)數(shù)據(jù)處理，布局組件A需要數(shù)據(jù)的時候就去B里面去取。假設(shè)，某一天我們的布局變了，我們只需要去修改組件A就行，而不用去修改組件B，從而就能充分復(fù)用組件B的數(shù)據(jù)處理邏輯，關(guān)于這塊我之前寫過一篇實際案例，可以點擊這里查看。

這里涉及到的一個最重要的點就是父組件要去獲取子組件里面的數(shù)據(jù)，之前是利用slot-scope，自vue 2.6.0起，提供了更好的支持 slot 和 slot-scope 特性的 API 替代方案。
比如，我們定一個名為current-user的組件：

<span>
<slot>{{ user.lastName }}</slot>
</span>

父組件引用current-user的組件，但想用名替代姓（老外名字第一個單詞是名，后一個單詞是姓）：

<current-user>
{{ user.firstName }}
</current-user>

這種方式不會生效，因為user對象是子組件的數(shù)據(jù)，在父組件里面我們獲取不到，這個時候我們就可以通過v-slot
來實現(xiàn)。

首先在子組件里面，將user作為一個<slot>元素的特性綁定上去：

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

之后，我們就可以在父組件引用的時候，給v-slot帶一個值來定義我們提供的插槽 prop 的名字：

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

這種方式還有縮寫語法，可以查看獨占默認(rèn)插槽的縮寫語法，最終我們引用的方式如下：

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

相比之前slot-scope代碼更清晰，更好理解。

感謝各位的閱讀！關(guān)于“vue作用域插槽有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！