溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關vue作用域插槽有什么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
作用域插槽
利用好作用域插槽可以做一些很有意思的事情，比如定義一個基礎布局組件A，只負責布局，不管數據邏輯，然后另外定義一個組件B負責數據處理，布局組件A需要數據的時候就去B里面去取。假設，某一天我們的布局變了，我們只需要去修改組件A就行，而不用去修改組件B，從而就能充分復用組件B的數據處理邏輯，關于這塊我之前寫過一篇實際案例，可以點擊這里查看。
這里涉及到的一個最重要的點就是父組件要去獲取子組件里面的數據，之前是利用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對象是子組件的數據，在父組件里面我們獲取不到，這個時候我們就可以通過v-slot
來實現。
首先在子組件里面，將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>這種方式還有縮寫語法，可以查看獨占默認插槽的縮寫語法，最終我們引用的方式如下：
<current-user v-slot="slotProps">
{{ slotProps.user.firstName }}
</current-user>相比之前slot-scope代碼更清晰，更好理解。
感謝各位的閱讀！關于“vue作用域插槽有什么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
