vue——插槽

​

1.概念：插槽是vue为组件的封装者提供的能力，允许开发者在封装组件时，把不确定的，希望由用户指定的部分定义为插槽

2.声明、使用：

//在Left组件中
<template>
    <div>
        <slot></slot>
    </div>
</template>
//在App组件中
<template>
    <div>
        <Left>
            <p>这是个插槽的用法</p>
        </Left>
    </div>
</template>

在Left组件中定义了后，系统会自动将App组件中Left组件的

的内容插入到其中

3.vue规定：每一个slot插槽都需要有一个name名称，如果省略了，默认名叫default

4.v-slot指令：只能使用在和组件中

用法：

//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属性的插槽

​