今天学习了组件,组件在整体的开发中,属于重要的功能,因此学习的内容多,这里就做个记录;
创建一个局部组件
要创建组件的时候,在项目下,创建一个文件夹,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里面学习的,还是需要把这个多看下,方便后期的学习