前端在组件开发中，参数的传递是组件最为常见的需求。子组件通过获取父级传递的各类参数进行对应的展示和操作逻辑。

那么在uniapp开发中，setup语法糖模式在子组件可以如何获取父级传递过来的参数呢？

本篇文章就来详细解读，子组件中如何获取从父级传递字符串、数组、JSON数据。

一、创建子组件childmodel中接收参数

    在components中创建子组件childmodel.vue，案例内容如下

<template>
	<view class="">
		<view class="">字符串：{{props.a_string || ''}}</view>
		<view class="">数字：{{props.a_number || 0}}</view>
		<view class="">数组：{{JSON.stringify(props.a_array || [])}}</view>
		<view class="">数组第一个数据：{{props.a_array[0]}}</view>
		<view class="">json：{{JSON.stringify(props.a_object)}}</view>
		<view class="">json中Name值：{{props.a_object.name}}</view>
	</view>
</template>
<script setup>
	// ============ Props ============
	const props = defineProps({
	    a_string: {
	        type: String,
	        default: ''
	    },
	    a_number: {
	        type: Number,
	        default: 300
	    },
		a_array:{
			type:Array,
			default:()=>[]
		},
		a_object:{
			type:Object,
			default(){
				return {}
			}
		}
	});
</script>

二、父级给子组件传递参数

    在父级定义好需要传递参数，在组件上传递参数

<template>
	<view class="">
		<childmodel
			:a_string="datas.a_string"
			:a_number="datas.a_number"
			:a_array="datas.a_array"
			:a_object="datas.a_object"
		></childmodel>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	import childmodel from "./childmodel.vue"
	const datas = reactive({
		a_string:'六月初技术站',
		a_number:6,
		a_array:[1,2,3,4,5,6],
		a_object:{
			name:'小郎算学共计'
		}
	})
</script>

三、代码注解

    1、子组件通过defineProps获取传递的参数

    2、子组件中数组和json默认值设置需要注意格式

    3、父级中对于子组件的使用需要先进行引入