關於vue插槽，也用過很多次了，但是關於作用域插槽的用法，有些模糊，查了很多文檔，自己理解記憶。
在官網上說：
舉例：你現在有一個組件，這個組件叫：navigation-link，它裡面有一個匿名插槽，它被在另一個組建中調用，並且傳入一個url，要在這個組件中渲染出來：
<navigation-link url="/profile"> <span> {{ url }}</span></navigation-link>
這當然是不可能的，span標籤裡的url會是undefined，這裡的 url 會是 undefined，因為 「/profile」 是 傳遞給 <navigation-link> 的， 而不是 在 <navigation-link> 組件內部定義的。
那麼問題來了，肯定會有這樣的業務需求啊，這時候，就要用作用域插槽了。
我將這個概念理解為：子組件的插槽要在父組件裡使用子組件內部的數據，可以靈活的渲染子組件的dom結構以及數據。
emmmm，可能有點繞，但是舉例：
設想一個帶有如下模板的 <current-user> 組件：
<span> <slot>{{ user.name}}</slot></span>
我們可能想換掉備用內容，用性別而不是姓名顯示。如下：
<current-user> {{ user.sex}}</current-user>
然而上述代碼不會正常工作，因為只有 <current-user> 組件可以訪問到 user， 而我們提供的內容是在父級渲染的。
為了讓 user 在父級的插槽內容中可用，我們可以將 user 作為<current-user>組件裡的 <slot> 元素的一個特性綁定上去：
<span> <slot :user="user"> {{ user.name}} // 插槽默認內容是user.name </slot></span>
綁定在 <slot> 元素上的特性被稱為插槽 prop。現在在父級作用域中，我們可以使用帶值的 v-slot 來定義我們提供的插槽 prop 的名字：
<current-user> <template v-slot:default="slotProps"> {{ slotProps.user.sex}} </template></current-user>
這裡說明：
1，這個作用域插槽必須使用模板template，
2，這個v-slot:default，是2.6.0以後的新語法，表示匿名插槽，如果是具名插槽<slot name="footer">，應該是v-slot:footer
3，這個slotProps是隨便起的名字，高興就好
ok，以上就解釋完了，當然，這是基礎版示例，當自己開發獨立組件的時候，還可以在template中自定義子組件插槽中的dom結構，比如：
// 引用1<current-user> <template v-slot:default="slotProps"> <ul> <li v-for="(item, index) in slotProps.userList"> {{item.name}}</li> </ul> </template></current-user>// 引用2<current-user> <template v-slot:default="myScope"> <div> <h1>{{myScope.apple.size}}</h1> <p>{{myScope.apple.color}}</p> </div> </template></current-user>
這是不是很靈活，看起來so beautiful，當然你還可以把父組件的數據傳入子組件，然後使用作用域插槽在父組件中渲染，更加靈活。
推薦一篇博文，寫的很仔細，從頭看完就明白了。