1.概念:插槽是vue为组件的封装者提供的能力,允许开发者在封装组件时,把不确定的,希望由用户指定的部分定义为插槽
2.声明、使用:
//在Left组件中
<template>
<div>
<slot></slot>
</div>
</template>
//在App组件中
<template>
<div>
<Left>
<p>这是个插槽的用法</p>
</Left>
</div>
</template>
在Left组件中定义了<slot></slot>后,系统会自动将App组件中Left组件的<p></p>的内容插入到其中
3.vue规定:每一个slot插槽都需要有一个name名称,如果省略了,默认名叫default
4.v-slot指令:只能使用在<template></template>和组件中
用法:
//App组件
<template>
<div>
<Left>
<template v-slot:MyLeft>
<p>v-slot指令的使用</p>
</template>
</Left>
</div>
</template>
//Left组件
<temlpate>
<div>
<slot name="MyLeft"></slot>
</div>
</template>
注意:v-slot:后面跟上插槽名字,v-slot: 可以简写成#,具名插槽:带有name属性的插槽