学习Uni-app开发小程序Day9

        今天学习了组件，组件在整体的开发中，属于重要的功能，因此学习的内容多，这里就做个记录；

        创建一个局部组件

        要创建组件的时候，在项目下，创建一个文件夹，components，创建这个文件夹后，所有的组件都在这个文件夹下创建。点击新建，这里会直接是创建一个组件，选择需要创建的组件模版，然后就进入到组件中了。（这里记得，在创建组件名称的时候，使用驼峰行式的，或者是成为这种方式：xxx-xxx，使用小写字母然后用横线的方式）

        使用的过程中，要使用的方法是，组件名称，在要使用的地方，用组件名称去创建；例如：<template> <userInfo></userInfo></template>,这就在父组件中引用了子组件了。传递参数，就是在子组件中定义好接受的参数，使用的是：defineProps（这里面写参数，如果不加参数的校验，就使用中括号的方式['名称']），如果要做校验的，就要使用这种方式：defineProps（{参数名：类型}），如果要添加默认值，就要使用defineProps({参数名:{type:类型，default：默认值}})；传值的时候，是在父组件中，使v-bind的方式，:子组件定义的参数名=“值或者定义的变量名”；在组件中也可以传递对象，下面我先把子组件的代码标记出来；

<template>
	<view class="userInfo">
		<!-- <image :src="avater" mode="" class="avater"></image>
		 <view class="userName">{{userName}}</view> 
		<view class="userName">{{uName}}</view>
		 -->
		 <!-- 这里是直接传递个对象，这是在测试的过程中，进行的显示 -->
		<!-- <view>{{obj}}</view> -->
		<!-- 要显示对象的时候，就直接用接收的对象，然后获取对象的值 -->
		<image :src="obj.avater" mode="" class="avater"></image>
		<view class="userName">{{obj.name}}</view>
	</view>
</template>

<script setup>
	import {computed} from "vue";
	//这是接收父组件传递的参数，使用的方法是defineProps，
	// const props = defineProps(['userName', 'avater'])
	
	// 如果要给传过来的参数进行定义,就是定义穿过来的参数的类型; 例如:
	// const props=defineProps({
	// 	userName:String,
	// 	avater:String
	// })
	
	// 如果要加上默认值,就是当不传的时候,就给一个默认的值
	// const props=defineProps({
	// 	userName:{
	// 		type:String,
	// 		default:"匿名"
	// 	},
	// 	//这里做个记录，当组件设置了默认值，但是在父组件中，有传当前值，只是类型错误的时候，控制台会报警告，
	// 	// 如果在父组件不加入这个参数,则不会报警告,设置的默认值也会显示出来
	// 	avater:{
	// 		type:String,
	// 		default:"../../static/logo.png"
	// 	}
	// })
	
	// 传递对象
	// defineProps(["obj"]);
	// 传递对象的时候,添加默认值
	//在传递对象的时候，添加校验，这里需要使用default方法，然后所有的参数需要使用return的方式，定义默认值
	defineProps({
		obj:{
			type:Object,
			default(){
				return {
					name:"匿名",
					avater:"../../static/logo.png"
				}
			}
		}
	})
	
	//如果要打印父组件传递过来的参数，就需要将参数设定一个变量，然后根据变量名得到传递的参数
	// console.log(props.userName);
	//如何要修改传递过来的参数，不能直接修改，接受过来的是一个只读的数据，可以使用计算属性，然后更改获取值，
	//在template中，就使用定义后的计算属性显示
	// const uName=computed( ()=>props.userName+"@")
	
</script>

<style lang="scss">
	.userInfo {
		width: 100vw;
		height: 200px;
		align-items: center; //设置子节点对齐方式
		justify-content: center; //设置在父组件中的各个子节点的排列方式
		display: flex; //设置元素是否被视为块或者内联元素及子元素的布局
		flex-direction: column; //内部元素在flex容器中布局定义的方向

		image {
			width: 100px;
			height: 100px;
			border-radius: 50% ; //设置设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。
		}

		.userName {
			padding: 10px 0;
			font-size: 15px;
		}

	}
</style>

这个组件中的注释，是在使用过程中做的笔记

在父组件中使用方式：

<template>
	<view class="box">
		<!-- <userInfo :userName="uname" ></userInfo> -->
		<userInfo :obj="obj"></userInfo>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const uname=ref("王五");
	// const avater=ref("../../static/pic1.png")
	const obj=ref({name:"王五",avater:"../../static/pic1.png"})
// </script>

<style lang="scss" scoped>

</style>

这就是今天学习的组件，这才是组件的最基础，还有很多需要学习的。这里还有个要说下，defineProps，这是在vue中的api里面学习的，还是需要把这个多看下，方便后期的学习