1.插槽的作用
插槽相當(dāng)于一個(gè)占位符，組件可以在這個(gè)占位符中填充任何模板代碼，讓用戶可以拓展組件，去更好地復(fù)用組件和對(duì)其做定制化處理。
2.插槽的分類(lèi)
（1）默認(rèn)插槽
就是單獨(dú)的一個(gè)<slot></slot>標(biāo)簽
在子組件中

template:`
                <li v-show="isShow">
                    <slot></slot>
                </li>
            `,

在父組件中

  template:`
                <div class="tabs">
                    <ul class="title">
                        <li @click="activeIndex=index" :class="{active:activeIndex===index}" v-for="(item,index) in titles" :key="index">{{item}}</li>
                    </ul>
                    <ul class="content">
                        <slot></slot>
                    </ul>
                </div>
            `,

這樣可以在<ul>標(biāo)簽中嵌入不同的標(biāo)簽，達(dá)到更好的擴(kuò)展效果
（2）具名插槽
在組件中

 template:`
                <div class="box">
                    <div class="item">
                        <h2>房產(chǎn)信息</h2>
                        <slot name="house"></slot>
                    </div>
                    <div class="item">
                        <h2>車(chē)輛信息</h2>
                        <slot name="car"></slot>
                    </div>
                    <div class="item">
                        <h2>存款信息</h2>
                        <slot name="money"></slot>
                    </div>
                </div>`

在渲染的模板中

<b-box>
            <template v-slot:house>
                <div>有5套房子</div>
            </template>
            <template #car>
                <div>有8輛汽車(chē)</div>
            </template>
            <template v-slot:money>
                <div>有3千萬(wàn)存款</div>
            </template>
        </b-box>

<slot> 元素有一個(gè)特殊的 attribute：name。這個(gè) attribute 可以用來(lái)定義額外的插槽,v-slot:插槽名稱(chēng)的方式，指定使用哪個(gè)插槽, #是v-slot:的簡(jiǎn)寫(xiě)
（3）作用域插槽
作用域插槽必須是具名插槽，通過(guò)v-bind:綁定屬性，綁定的屬性，通過(guò)指定的作用域變量去接收
相關(guān)用法示例

<div id="app">
        <b-box>
            <template v-slot:list="scope">
                <button @click="priceDown(scope.list,scope.index)">降價(jià)</button>
                <button @click="priceUp(scope.list,scope.index)">加價(jià)</button>
                <button @click="scope.list.splice(scope.index,1)">刪除</button>
            </template>
        </b-box>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script>
        Vue.config.productionTip = false
        Vue.component('b-box', {
            template:`
            <div>
                <ul>
                    <li v-for="(item,index) in list" :key="index">
                        <span>{{item.id}}-{{item.name}}-{{item.price}}</span>
                        <slot name="list" v-bind:index="index" v-bind:list="list"></slot>
                    </li>
                </ul>
            </div>
            `,
            data() {
                return {
                    list:[
                        {
                            id:1001,
                            name:'蘋(píng)果手機(jī)',
                            price:5999
                        },
                        {
                            id:1002,
                            name:'華為手機(jī)',
                            price:6999
                        },
                        {
                            id:1003,
                            name:'小米手機(jī)',
                            price:7999
                        },
                        {
                            id:1004,
                            name:'三星手機(jī)',
                            price:8999
                        }
                    ]
                }
            }
        })
        new Vue({
            el:'#app',
            methods: {
                priceDown(list,index){
                    list[index].price-=1000
                },
                priceUp(list,index){
                    list[index].price+=1000
                }
            },
        })
    </script>

混入
混入的作用是分發(fā) Vue 組件中可復(fù)用的功能，一個(gè)混入對(duì)象可以包含任何組件選項(xiàng)，當(dāng)組件使用這個(gè)混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。
（1）全局混入
使用全局混入的時(shí)候要小心，因?yàn)橐坏┦褂?，它將?huì)影響每一個(gè)之后創(chuàng)建的Vue實(shí)例
import mixin from ./mixin/mixin
Vue.mixin(mixin)
（2）局部混入
創(chuàng)建一個(gè)mixin混入對(duì)象，里面定義一些可復(fù)用的功能，然后再要使用的Vue實(shí)例中導(dǎo)入mixins:[mixin]