插槽相当于占位，在组组件中的固定位置预定一个位置，当我们调用组件的时候好能够在那个位置插入我们想要补充的内容。
V-Input.vue
<div>
<input v-model="inp"/>
<slot name="btn" :data="inp"></slot>
</div>
export default{
data:()=>{
inp: ''
}
}
name属性定义具名插槽，一般用于单组件具有多插槽。意思就是这里是某某地，不设置就是默认插槽。还可以通过v-bind绑定属性传递给父组件。
Father.vue
<div>
<v-input>
<template #btn="btnProps">
<button @click="serch(btnProps.data)">
serch
</button>
</template>
</v-input>
</div>
export default{
methods:{
serch(payload){
console.log(payload);
}
}
}
父组件使用具名插槽v-slot:name表示我要到某某地方去。接收插槽参数是使用v-slot:name=props然后使用props.data,这里props是自己任意起名的，data也是任意起名，但是要和你在子组建中设置的一致。
