Vue3中的父子之间的消息传递可以通过Emit进行消息传递.详细参见Vue3的官方文档Event的说明https://vuejs.org/guide/components/events.html#declaring-emitted-events
官网中的文档读起来稍微有点费解,这里阐述一下,其实就是父Component通过v-on将回调函数传递给子Component,子Component通过emit函数调用回调函数完成父子之间的数据传递.
子Component中的实现:
<script setup lang="ts"> const emit = defineEmits<{ (e: 'change', id: number): void (e: 'update', value: string): void }>() </script>
其中‘change’,‘update’为Emit Event的Key, id等为回调函数的参数定义,可以定义多个参数,定义方法类似:例如
(e: 'change', id: number,param2:string, xxxx): void
在子Component发送消息的时候调用函数
emit(“change”, param1, param2,xxx)
父Component的调用子Component的使用v-on来传递回调函数.
<ChildComponent @change="father_fun"/> fatcher_fun为父Component的函数
在使用中遇到困惑的问题是使用Vue-Router的<routerview/>怎么传递,后来发现<routerview @chang="father_fun"/>直接加就可以.