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

成都地區(qū)優(yōu)秀IDC服務器托管提供商(創(chuàng)新互聯(lián)公司).為客戶提供專業(yè)的雅安服務器托管,四川各地服務器托管,雅安服務器托管、多線服務器托管.托管咨詢專線：18980820575

作用域插槽

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

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

{{ user.lastName }}

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

{{ user.firstName }}

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

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

{{ user.lastName }}

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

{{ slotProps.user.firstName }}

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

{{ slotProps.user.firstName }}

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

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