vue3子父传值

 由于vue3不能再使用this,子父传值有了一点小小的改动，废话不多说直接上代码

子组件

<template>
	<div @click="btn">
			<span>
				我是一个子组件{{num}}
			</span>
	</div>
</template>

<script>
	import {ref} from 'vue'
	export default {
		props:["num"],//接受父组件值
		setup(props,context){
		const btn = () =>{
			context.emit('btn')
		}
			return{
				props,btn//返回props和事件函数
			}
		}
	}
</script>

<style scoped>

</style>

 父组件

<template>
	<div>
		<!-- @btn为子组件传来的事件名,btn为自定义事件名 :num为子组件接收的属性名 num为setup中定义的变量 -->
			<Zi @btn="btn" :num="num"></Zi>
	</div>
</template>

<script>
	import Zi from '../components/Zi.vue'//获取子组件
	import {ref} from 'vue'//引入ref的Api
	export default {
		components:{
		Zi//注册子组件	
		},
		setup(){
			const num = ref(0);
			const btn = ()=>{
			 num.value++
			 console.log(num.value)
			}
			return{
			num,btn
			}
		},	
	}
</script>

<style scoped>

</style>