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>

运行效果

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