网站即时在线客服深圳百度关键词
插槽
好处：组件的内容结构可定制 用slot插槽进行占位
语法: 子组件中通过slot进行占位
理解：父组件，在子组件标签嵌套的内容就会被渲染到slot地方
一、默认插槽
//子组件
<slot>slot插槽</slot> //方法一<slot name="default">slot插槽</slot> //方法二//父组件
<exercise-first>slot插槽</exercise-first>二、具名插槽
//子组件
<slot name="header"></slot>通过指定 name 属性来定义一个具名插槽。在使用组件时，可以将内容分发到对应的具名插槽中。
//父组件 v-slot:main
<exercise-first><template v-slot:main><div>具名组件</div></template>
</exercise-first>注意：
一、通过v-slot:来查找具名插槽
二、为什么用template, template等于是一个包，不是div盒子，页面是看不到template标签的
三、作用域插槽
作用域插槽的语法: v-slot:slotName="parameter"，其中 slotName 是插槽的名称，parameter 是接收子组件数据的参数。
接收：的是已 对象的形式
//父组件中定义的
<template v-slot:slotname2="obj">
//子组件中定义的
<slot name="slotname2" :item1='item' value="111" ></slot>案例：
<!-- 子组件 -->
<template><div><slot name="item" v-for="item in items" :item="item"></slot></div>
</template><!-- 父组件 -->
<template><div><template v-slot:item="{ item }"><p>{{ item }}</p></template></div>
</template>四、具名插槽缩写写法
v-slot缩写#
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：
<template v-slot:dalete></template>等同于：<template #dalete></template><slot name="header"></slot>
<!-- 缩写写法 -->
<slot name="header"/>