插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。
插槽就是子组件中的提供给父组件使用的一个占位符
灵活的内容分发模式,父组件决定内容,子组件slot决定位置
重点概念:插槽 prop slotProps,绑定在 元素上的 attribute 被称为插槽 slotProps
#header="{key}";插槽访问子组件中才有的数据的办法
//slot 注册
//easycom自定义组件目录规范
//components\slotone\slotone.vue
<template>
<view>
<slot name="header" :thanks="thanks"></slot>
<view :style="{background:color}">
hello
</view>
<image src="../../static/logo.png" @click="handleClick"></image>
</slot>
</view>
</template>
<script>
export default {
name: "card",
props: {
color: {
type: String,
default: "white"
}
},
data() {
return {
thanks: "Mary"
}
},
methods: {
handleClick() {
console.log("子组件的事件......");
this.$emit("handleClick", 123)
}
},
}
</script>
//slot 调用
<template>
<view class="content">
<card @handleClick="handleClick">
<!-- 通过 slotProps访问子组件中才有的data-->
<!-- thanks在子组件中data中,属于子组件自有数据 -->
<template #header="{thanks}">
<view v-for="(item,index) in thanks" :key="index">
{{item}}
</view>
</template>
</card>
<card :color="color"></card>
<card color="red"></card>
<card ></card>
</view>
</template>
<script>
export default {
data() {
return {
color: 'yellow',
thanks:'abc'
}
},
methods: {
handleClick(e) {
console.log("父组件的事件......",e);
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
总结:
- 使用easycom 组件化配置方法
//components\slotone\slotone.vue - 父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。
- 插槽的默认内容:
我们可能希望slot内绝大多数情况下都渲染文本“xxx”。可以设置插槽的默认内容
<slot >xxx</slot>
- 具名插槽:
需要多个插槽时,可以利用 元素的一个特殊的特性:name 来定义具名插槽
<slot name="footer"></slot>
- 具名插槽的缩写
v-slot:footer 可以被重写为 #footer
<template #footer>
父组件中的内容...
</template>
- 作用域插槽
作用域插槽,绑定在 元素上的 attribute 被称为插槽 prop
//定义 user属于自定义组件的私有变量
<slot :user="user"></slot>
data() {
return {
user: "Mary"
}
}
//调用
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
//es6新特性 解构赋值
<template v-slot:default="{user}">
{{ user.firstName }}
</template>
- 完整的基于 的语法
默认插槽的缩写语法不能和具名插槽混用,因为它会导致作用域不明确
只要出现多个插槽,请始终为所有的插槽使用完整的基于 的语法:
<template>
<view>
<组件名>
<template #default="{user}">
{{ user }}
</template>
</组件名>
</view>
</template>
总结: