1.使用普通插槽

 index.vue（引入test.vue,注册)

 <template><p>使用插槽</p>
//使用插槽<test><p>插入的内容</p></test>
</template>

test.vue

<template><p>普通插槽</p>
//slot占位<slot></slot>
</template>

2.具名插槽（多个插槽）

 index.vue（引入test.vue,注册)

v-slot:可简写为#

 <template><p>具名插槽</p>//使用插槽<test>
//必须用template包裹<template v-slot:header><p>插入的内容</p></template></test><test>
//必须用template包裹<template #footer><p>插入的内容</p></template></test>
</template>

test.vue

<template><p>具名插槽</p>
//solt占位<slot name="header"></slot><footer><slot name="footer"></slot></footer>
</template>

3.作用域插槽（slot绑定数据）

  index.vue（引入test.vue,注册)

 <template><p>具名插槽</p>//使用插槽<test>
//必须用template包裹//<template v-slot:header="scope">//    <p>{{scope}}</p>//</template>//解构赋值<template v-slot:header="{msg,info}"><p>{{msg}}</p><p>{{info.phone}}</p></template></test><test>
//必须用template包裹<template #footer><p>插入的内容</p></template></test>
</template>

test.vue

<template><p>具名插槽</p>
//solt占位<slot name="header" :msg="info" :msg2="message"></slot><footer><slot name="footer"></slot></footer>
</template>
export default {name: 'App',data () {return {info:{phone:'1552555565',name:'zs'},
message:'1111'}},
}