什么叫插槽
插槽(Slot)是 Vue 提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制
插槽的分类
插槽有三种:默认插槽、具名插槽、作用域插槽。
1.默认插槽
如果父组件没有设置“修改插槽信息”,那么运行出来的值就是“默认插槽内容”,有的话就会覆盖默认信息
//子组件
<template>
<div>
<slot>默认插槽内容</slot>
</div>
</template>
// 父组件, 使用前记得import引入子组件
// import SlotChild from '@/components/Slot/index.vue'
<template>
<div>
<SlotChild>修改插槽信息</SlotChild>
</div>
</template>
2.具名插槽(简单的说就是有名字标识的插槽)
如果父组件没有设置“修改插槽信息”,那么运行出来的值就是“默认插槽内容”,有的话就会覆盖默认信息
// 子组件
<template>
<div>
<slot name="slotName">带有名字标识的默认插槽内容</slot>
</div>
</template>
// 父组件
<template>
<div>
<!-- 带有名字的插槽 -->
<SlotChild>
<template slot="slotName">修改有名字的插槽信息</template>
<p slot="slotName">修改有名字的插槽信息</p>
</SlotChild>
<!-- vue2.6版本之后语法的更新 -->
<SlotChild>
// v-slot不可以写在p标签上,只可以写在template上
<template v-slot:slotName>修改有名字的插槽信息</template>
</SlotChild>
<!-- v-slot: 的缩写# -->
<SlotChild>
<template #slotName>修改有名字的插槽信息</template>
</SlotChild>
</div>
</template>
3.作用域插槽
// 子组件
<template>
<div>
// 此处的row自定义名字, data就是绑定的数据,可以供父级使用
<slot :row="data">绑定数据的默认插槽内容</slot>
</div>
</template>
<script>
export default {
data() {
return {
data: ["1", "2", "3"],
};
},
};
</script>
// 父组件
<template>
<div>
<!-- 绑定数据的插槽 -->
<SlotChild>
// 此处scope也可以使用ES6 解构赋值 {}
<template slot-scope="scope">
{{ scope.row }}
</template>
<p slot-scope="scope">
{{ scope.row }}
</p>
</SlotChild>
</div>
</template>
4.具名且绑定数据的插槽
// 子组件
<template>
<div>
<slot name="slotName" :row="data">带有名字且绑定数据的默认插槽内容</slot>
</div>
</template>
<script>
export default {
data() {
return {
data: ["1", "2", "3"],
};
},
};
</script>
// 父组件
<template>
<div>
<SlotChild>
<template slot="slotName" slot-scope="scope">
{{ scope.row }}
</template>
<p slot="slotName" slot-scope="scope">
{{ scope.row }}
</p>
</SlotChild>
<!-- vue2.6版本之后语法的更新 -->
<SlotChild>
// v-slot不可以写在p标签上,只可以写在template上
<template v-slot:slotName="scope">
{{ scope.row }}
</template>
</SlotChild>
</div>
</template>
注意!!
v-slot: 的缩写可以简写成#
例如 :
1.v-slot:aaa=“scope” ==> #aaa=“scope” 前提是必须具有名字的插槽
2. v-slot:aaa ===> #aaa
v-slot不能写在p标签上,只能写在template上