vue3 uniapp 父子相传

父组件数据

<template>
	<view class="fu">
		<view class="fuzu">父组件自己的数据</view>
		<input type="text" v-model="num" placeholder="请输入">
		<view  class="zizu">
			子组件传过来的数据
		</view>
		{{isShow.age}}---{{isShow.sex}}
	
	</view>
	
	<view>---------------------------</view>

	<personalInformation :num='num' @but='but'></personalInformation>
	
</template>
<script lang="ts">
	import {reactive ,ref} from "vue"
	import personalInformation from '../personalInformation/personalInformation.vue'
	export default {
		components: {
		
			personalInformation
		},
		props:['but'],
		
		setup() {
		
			const isShow =reactive({
				age :  "年龄",
				sex : '性别'
			})
			
		
			const num = ref('')
			
			function but (e){
			// num.value = e.value
			isShow.age = e.age
			isShow.sex = e.sex
			}
			
			return {
			
				num,
				but,
				isShow

			}

		}
	}
</script>
<style>
	.fu{
		padding: 30px;
	}
	.fuzu{
		color: aqua;
		padding: 20px;
	}
	.zizu{
		color: blue;
		padding: 20px;
	}
</style>

子组件数据

<template>
	<view class="zi">
	   <view>子组件 输入区域</view>
	   	{{name.age}}-{{name.sex}}
		<input type="text" v-model="name.age"  placeholder="请输入年龄">
		<input type="text" v-model="name.sex"  placeholder="请输入性别">
		<view>父组件传过来的值 	{{num}}</view>
		<button @click="but">点击</button>
	</view>
</template>
<script>
import { reactive, ref  } from "vue"
	
	export default {
		emits:['but'],
		props:['num'],
		setup(props, context) {
			const name =  reactive({
				age :  '',
				sex :''
			})
			
			// const name = ref('')
			
			function but(){
				context.emit('but',name)
			}
			
			return{
				name,
				but
			}
			
		}
	}
	
	
</script>
<style>
	.zi{
	padding: 20px;
	
	}
</style>

效果展示