Vue3中子组件向父组件传递对象值

子组件向父组件传递值通过defineEmits来进行传值。

语法：

const emit = defineEmits<({(e:'自定义事件名称',val:'需要传递的值'):void})>()

子组件向父组件传递：

1. 首先定义接口

interface Person{
    name:string,
    age:number,
    job:string
}

2. 使用defineEmits

const emit = defineEmits<{(e:'toFather',val:Person):void}>()

3. 定义需要传递的值

let message = ref({
    name:'Mike',
    age:13,
    job:'teacher'
})

4.  定义事件触发emit

const toFather = ()=>{
    emit('toFather',message.value)
}

父组件：

1. 通过自定事件接收值

 - 在子组件定义自定义事件

- 定义接口用来接收子组件传递的参数

interface Person{
    name:string,
    age:number,
    job:string
}

- 使用自定义事件

let receiveMsg = ref() 
const receiveMsgBySon = (val:Person)=>{
    receiveMsg.value = val
}

 这里需要注意的是val限制的类型需要和receiveMsg的类型相同

子组件完整代码:

   父组件完整代码：