自学内容网 自学内容网
自学内容网 > 正文

uniapp学习（004-1 组件 Part.1）

🕗 发布于 2024-10-11 14:14 uni-app  学习  微信小程序  小程序  前端  

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第26p-第p30的内容

文章目录

uniapp和vue差异对比

在这里插入图片描述

在这里插入图片描述

写几个组件并且引用

在这里插入图片描述

直接引用组件
在这里插入图片描述
都可以引用
在这里插入图片描述

props传值

给组件添加样式

在这里插入图片描述
在这里插入图片描述
在子组件里添加声明 可以传入的变量名称
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

可以使用变量
在这里插入图片描述

也可以传图片
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

我们不可以对传过来的数据进行修改 我们要自己定义一个变量
在这里插入图片描述

添加类型约束

在这里插入图片描述

约束类型并且添加默认值

在这里插入图片描述

在这里插入图片描述

props的各种写法

在这里插入图片描述

在这里插入图片描述

传递对象

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

设置默认信息

在这里插入图片描述
在这里插入图片描述

循环头像列表

在这里插入图片描述

在这里插入图片描述

插槽 slots

在这里插入图片描述

在这里插入图片描述
定义一个组件 并且添加插槽标签
在这里插入图片描述
在引入它的页面 里添加插槽信息

在这里插入图片描述

写几个aaaaa
在这里插入图片描述
在内部有展示
在这里插入图片描述

具名插槽

如果有多个地方需要自定义 可以给每个插槽起个名字，防止混乱
在这里插入图片描述
格式 template v-slot:名字
在这里插入图片描述
v-slot:名字 也可以简写成 #名字
在这里插入图片描述
可以写多个插槽
在这里插入图片描述

emit 组件事件

在这里插入图片描述

我们希望子组件的数据发送给父组件

在子组件里定义一个$emit
在这里插入图片描述
在父组件里调用方法
在这里插入图片描述
在这里插入图片描述

另一种写法 在代码块里使用emit

在这里插入图片描述

也可以定义多个emit事件
子组件写 add和change
在这里插入图片描述
父组件定义 @add和@change
在这里插入图片描述

在这里插入图片描述


原文地址：https://blog.csdn.net/wang_book/article/details/142791914

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024