作用域插槽 slot-scope / #default:value / #default: { name }

使用场景：开发组件时，为了考虑到使用组件的人需要自定义该组件，因此vue计设了作用域插槽的功能
例如：组件A （不考虑使用者自定义）

new Vue({
    el: '#app',
    components: {
        okex: {
            data(){
                return {
                    msg: "lorem10258"
                }
            },
            template: `<div>{{msg}}</div>`
        }
    },
}

<div id="app">
    <okex></okex>
</div>

效果则为显示如下：
<pre>
<div style="padding: 30px;">
lorem10258
</div>
<div>
此时一个特殊客户要求 lorem10258 文本需要改成红色加粗，但是该组件又不能因为这个特殊的客户将整个组件的文本颜色都设置成红色加粗，这个时候 <span style="font-weight: bold; color: red;">作用域插槽</span>就登场了
</div>
</pre>
<ul>
<li>258</li>
<li>258</li>
<li style="color: red;">258</li>
</ul>

给组件加入作用域插槽 slot :msg="msg"

new Vue({
    el: '#app',
    components: {
        okex: {
            data(){
                return {
                    msg: "lorem10258"
                }
            },
            template: ` <div>
                            <slot :msg="msg">{{msg}}</slot>
                        </div>`
        }
    },
}

正常使用：便捷 + 符合大部分用户需求

<div id="app">
    <okex></okex>
</div>

特殊使用：可以满足殊客户的自定义需求（红色加粗）

<div id="app">
    <okex>
        <!-- <template slot-scope="{msg}">
            <span class="">{{msg}}</span>
        </template> -->
        <template #default="{ color }">
            <span style="color: red; font-weight: bold;">{{color}}</span>
        </template>
    </okex>
</div>

特殊效果如下
<div style="padding: 30px; color: red; font-weight: bold;">
lorem10258
</div>

以上便是vue作用域插槽的由来，及基本本使用方法