1.插槽的作用
插槽相当于一个占位符，组件可以在这个占位符中填充任何模板代码，让用户可以拓展组件，去更好地复用组件和对其做定制化处理。
2.插槽的分类
（1）默认插槽
就是单独的一个<slot></slot>标签
在子组件中

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>标签中嵌入不同的标签，达到更好的扩展效果
（2）具名插槽
在组件中

 template:`
                <div class="box">
                    <div class="item">
                        <h2>房产信息</h2>
                        <slot name="house"></slot>
                    </div>
                    <div class="item">
                        <h2>车辆信息</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辆汽车</div>
            </template>
            <template v-slot:money>
                <div>有3千万存款</div>
            </template>
        </b-box>

<slot> 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽,v-slot:插槽名称的方式，指定使用哪个插槽, #是v-slot:的简写
（3）作用域插槽
作用域插槽必须是具名插槽，通过v-bind:绑定属性，绑定的属性，通过指定的作用域变量去接收
相关用法示例

<div id="app">
        <b-box>
            <template v-slot:list="scope">
                <button @click="priceDown(scope.list,scope.index)">降价</button>
                <button @click="priceUp(scope.list,scope.index)">加价</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:'苹果手机',
                            price:5999
                        },
                        {
                            id:1002,
                            name:'华为手机',
                            price:6999
                        },
                        {
                            id:1003,
                            name:'小米手机',
                            price:7999
                        },
                        {
                            id:1004,
                            name:'三星手机',
                            price:8999
                        }
                    ]
                }
            }
        })
        new Vue({
            el:'#app',
            methods: {
                priceDown(list,index){
                    list[index].price-=1000
                },
                priceUp(list,index){
                    list[index].price+=1000
                }
            },
        })
    </script>

混入
混入的作用是分发 Vue 组件中可复用的功能，一个混入对象可以包含任何组件选项，当组件使用这个混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
（1）全局混入
使用全局混入的时候要小心，因为一旦使用，它将会影响每一个之后创建的Vue实例
import mixin from ./mixin/mixin
Vue.mixin(mixin)
（2）局部混入
创建一个mixin混入对象，里面定义一些可复用的功能，然后再要使用的Vue实例中导入mixins:[mixin]