当前位置: 首页 > news >正文

uniapp如何创建并使用组件?组件通过Props如何进行数据传递?

欢迎来到我的UniApp技术专栏!🎉 在这里,我将与大家分享关于UniApp开发的实用技巧、最佳实践和项目经验。

专栏特色:

📱 跨平台开发一站式解决方案
🚀 从入门到精通的完整学习路径
💡 实战项目经验分享
🔍 常见问题深度解析
无论你是刚接触UniApp的新手,还是有一定经验的开发者,都能在这里找到有价值的内容。我将持续更新最新技术动态和开发技巧,帮助大家提升开发效率,打造高质量的跨平台应用。

如果文章对你有帮助,别忘了点赞收藏🌟,也欢迎在评论区留言交流,我会及时回复大家的问题!

让我们一起探索UniApp的无限可能!💪

目录

一.创建组件

1.在项目根目录下,创建components文件夹

2.右击“components”目录,选择创建组件

3.在创建的UserInfo组件中,编写代码

二.使用组件

三.组件通过Props进行数据传递

1.在父组件中,传递数据

2.在子组件中,接收父组件传来的数据

3.案例代码

4.props校验和默认值的用法

5.传递一个对象

6.传递一个对象数组


一.创建组件

1.在项目根目录下,创建components文件夹

注意:文件夹名称一定不能错!

2.右击“components”目录,选择创建组件

3.在创建的UserInfo组件中,编写代码

二.使用组件

我们直接在index.vue中,使用组件名,作为一个标签即可访问自定义组件。

运行效果

以上是我们访问index.vue页面的样子,因为index.vue中使用了<UserInfo></UserInfo>组件。

三.组件通过Props进行数据传递

注意:一般我们使用Props,是从父组件传递数据给子组件(即:父亲给孩子分配资源)。

1.在父组件中,传递数据

如下图,在index.vue(父组件)中,我们向子组件UserInfo.vue传递了username(用户名)、avatar(头像)这两个数据。

2.在子组件中,接收父组件传来的数据

在子组件中,可以通过defineProps直接来接收父组件传来的数据。

 注意:父组件传来的数据,是只读的,也就是说,我们不能直接修改username、avatar,但是可以使用。

        此时我们可以定义一个props变量,来接收defineProps的值,然后就能使用了。

3.案例代码

父组件index.vue的代码

<template><view class="content"><UserInfo username="casually" avatar="../../static/avatar1.png"></UserInfo><UserInfo username="gem" avatar="../../static/avatar2.png"></UserInfo><UserInfo :username="name" avatar="../../static/avatar3.png"></UserInfo></view>
</template><script setup>
import {ref} from 'vue';
const name = ref("王五");
</script><style></style>

子组件UserInfo.vue的代码

<template><view class="userinfo"><image :src="avatar"></image><view>{{username}}</view></view>
</template><script setup>
const props = defineProps(['username','avatar']);
console.log("父组件传来的用户名是:" + props.username);
console.log("父组件传来的头像url是:" + props.avatar);
</script><style lang="scss" scoped>
.userinfo{width:100%;height:200px;background:#ccc;display: flex;align-items: center;justify-content: center;flex-direction:column;image{width:100px;height:100px;border-radius: 50%;}.username{padding:10px 0;font-size: 20px;}
}
</style>

运行效果:访问index.vue页面的效果如下图所示

4.props校验和默认值的用法

当我们在父组件中,不传递部分数据,会出现如下情况:

解决方案:在子组件中,接收父组件的数据时,就设置每一个参数的类型和默认值,如下:

运行效果

5.传递一个对象

父组件

<template><view class="content"><UserInfo :obj="userinfo"></UserInfo><UserInfo></UserInfo></view>
</template><script setup>
import {ref} from 'vue';
const userinfo = ref({name:"张三",avatar:"../../static/avatar1.png"}
)
</script><style></style>

子组件

<template><view class="userinfo"><image :src="obj.avatar"></image><view>{{obj.name}}</view></view>
</template><script setup>
//defineProps(["obj"])
defineProps({obj:{type:Object,default(){return {name:"匿名", avatar:"../../static/logo.png"}}}
})
</script><style lang="scss" scoped>
.userinfo{width:100%;height:200px;background:#ccc;display: flex;align-items: center;justify-content: center;flex-direction:column;image{width:100px;height:100px;border-radius: 50%;}.username{padding:10px 0;font-size: 20px;}
}
</style>

运行效果

6.传递一个对象数组

父组件

<template><view class="content"><UserInfo v-for="item in userinfo" :obj="item"></UserInfo></view>
</template><script setup>
import {ref} from 'vue';
const userinfo = ref([{name:"张三",avatar:"../../static/avatar1.png"},{name:"李四",avatar:"../../static/avatar2.png"},{name:"王五",avatar:"../../static/avatar3.png"},
]
)
</script><style></style>

子组件

<template><view class="userinfo"><image :src="obj.avatar"></image><view>{{obj.name}}</view></view>
</template><script setup>
//defineProps(["obj"])
defineProps({obj:{type:Object,default(){return {name:"匿名", avatar:"../../static/logo.png"}}}
})
</script><style lang="scss" scoped>
.userinfo{width:100%;height:200px;background:#ccc;display: flex;align-items: center;justify-content: center;flex-direction:column;image{width:100px;height:100px;border-radius: 50%;}.username{padding:10px 0;font-size: 20px;}
}
</style>

运行效果

以上就是本篇文章的全部内容,喜欢的话可以留个免费的关注呦~

http://www.lryc.cn/news/583447.html

相关文章:

  • scp:上传大型数据集到实验室服务器
  • linux-用户和组
  • 家庭网络中的服务器怎么对外提供服务?
  • linux-进程信号的产生与发送
  • Redis分布式锁从入门到放弃:Redisson源码解密
  • 玛哈特网板矫平机:精密矫平金属开平板的利器
  • 掌握 Winget 安装:从 Microsoft Store 到 winget-install 脚本的完整方案
  • 虚幻引擎5 GAS开发俯视角RPG游戏 #5-8:倾听属性变化
  • 基于Matlab多特征融合的可视化指纹识别系统
  • 141-CEEMDAN-VMD-Transformer-BiLSTM-ABKDE多变量区间预测模型!
  • 让AI绘图更可控!ComfyUI-Cosmos-Predict2基础使用指南
  • Fluent许可配置常见问题
  • Android网络层架构:统一错误处理的问题分析到解决方案与设计实现
  • 编写产品需求文档:黄历日历小程序
  • 暑假读书笔记第五天
  • 自然语言处理中probe探测是什么意思。
  • Oracle 数据库升级踩坑:DBLink ORA-02019 问题解决思路
  • 编写Shell脚本开放端口
  • 函数-3-日期函数
  • 【Linux | 网络】socket编程 - 使用TCP实现服务端向客户端提供简单的服务
  • 记忆管理框架MemOS——在时序推理上较OpenAI提升159%
  • [IMX][UBoot] 13.Linux 内核源码目录分析
  • 脑电分析入门指南:信号处理、特征提取与机器学习
  • 【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)
  • 暑假的挣扎与自我梳理
  • 【计算机三级网络】——IP校园网大题(第二道):路由代码填空
  • 【HarmonyOS6】获取华为用户信息
  • 【Linux】·C++缺陷和思考
  • 【05】MFC入门到精通——MFC 为对话框中的控件添加变量 和 数据交换和检验
  • Laravel 动态生成 PDF:基于 KnpSnappy 实现多公司页眉页脚差异化配置