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

本文详细介绍了Vue.js中的插槽机制,包括默认插槽、具名插槽和作用域插槽的使用。通过插槽,父组件能够将内容插入到子组件的特定位置,实现模板的模块化和重用。同时,作用域插槽允许父组件访问子组件的数据,增强了组件间的交互。示例代码展示了如何定义和调用插槽,以及如何通过插槽props传递数据。
摘要由CSDN通过智能技术生成

插槽(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>
  1. 具名插槽:
    需要多个插槽时,可以利用 元素的一个特殊的特性:name 来定义具名插槽
<slot name="footer"></slot>
  1. 具名插槽的缩写

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

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

  1. 作用域插槽
    作用域插槽,绑定在 元素上的 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>
  1. 完整的基于 的语法
    默认插槽的缩写语法不能和具名插槽混用,因为它会导致作用域不明确
    只要出现多个插槽,请始终为所有的插槽使用完整的基于 的语法:
<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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

光明有我VX16620122910

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值