Vue3中的Component之间的消息传递

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"/>直接加就可以.