vue插槽

1.v-slot基本用法：
如果不使用插槽，在父组件的子组件标签内部写的内容是无效的，这就是插槽的作用，使用具名插槽更清晰明了：

父组件中：
<template>
    <div>
        <child1>
        //注意 v-slot 只能添加在 <template> 上 (只有一种例外情况)，这一点和已经废弃的 slot 特性不同
            <template v-slot:footer="props">写法1，//这里的props是自定义的名字
            //<template v-slot:footer="{user}">写法2，对象的形式，这里是缩写，对象的键可以更名，如{parentUser:user}
                <div>
                    {{user.name}}//写法2，直接拿到user
                    <!-- {{props.user.name}}+{{props.user.tel}} -->//写法1，使用props的写法这样拿到子组件中的数据
                </div>
            </template>
        </child1>
    </div>
</template>
子组件中：
<template>
    <div class="contain">
        <button>changeNum</button>
        <slot name="footer" :user="user"></slot>//此处可将user对象传到父组件
       <son v-bind="$attrs" v-on="$listeners"/>
    </div>
</template>