uni-app学习笔记---插槽slot

插槽（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>

总结:

1. 使用easycom 组件化配置方法
   //components\slotone\slotone.vue
2. 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
3. 插槽的默认内容:
   我们可能希望slot内绝大多数情况下都渲染文本“xxx”。可以设置插槽的默认内容

<slot >xxx</slot>

4. 具名插槽:
   需要多个插槽时，可以利用 元素的一个特殊的特性：name 来定义具名插槽

<slot name="footer"></slot>

5. 具名插槽的缩写

v-slot:footer 可以被重写为 #footer

<template #footer>
父组件中的内容...
</template>

6. 作用域插槽
   作用域插槽,绑定在 元素上的 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>

7. 完整的基于 的语法
   默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确
   只要出现多个插槽，请始终为所有的插槽使用完整的基于 的语法：

<template>
        <view>
            <组件名>
                <template #default="{user}">
                    {{ user }}
                </template>               
            </组件名>
        </view>
</template>

总结:

1. 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码;

2. 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的;

3. 绑定在 元素上的 attribute 被称为插槽 prop slotProps,插槽访问子组件中才有的数据的办法#header=“slotProps” || #header="{key}";

4.父组件中template #header="{key}" template

5.自定义组件slot :key=“key” slot

6. 自定义组件data(){ return {key:“xxx”} }

7.,插槽不能访问子组件中才有的数据slotProps