關於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，當然你還可以把父組件的數據傳入子組件，然後使用作用域插槽在父組件中渲染，更加靈活。
推薦一篇博文，寫的很仔細，從頭看完就明白了。