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

最新推荐文章于 2024-08-02 09:29:40 发布

Miketutu

最新推荐文章于 2024-08-02 09:29:40 发布

阅读量2.2k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Miketutu/article/details/130686380

版权

文章介绍了在Vue.js中，如何使用defineEmits进行类型安全的父子组件通信。子组件通过定义自定义事件并指定参数类型，将数据传递给父组件，父组件通过监听该事件来接收并处理传递的值。示例代码详细展示了定义事件、创建数据模型、触发事件及接收事件的全过程。

摘要由CSDN通过智能技术生成

子组件向父组件传递值通过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<Person>({
    name:'Mike',
    age:13,
    job:'teacher'
})

4. 定义事件触发emit

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

父组件：

1. 通过自定事件接收值

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

    <Child :msg="msg" @toFather="receiveMsgBySon"></Child>

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

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

- 使用自定义事件

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

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

子组件完整代码:

<template>
    <div class="Child">
        <h3>子组件</h3>
        {{ msg }}
        <button @click="toFather">发送给父组件</button>
    </div>
</template>

<script  lang="ts" setup>
import {ref} from 'vue'
defineProps<{msg:string}>()
interface Person{
    name:string,
    age:number,
    job:string
}
const emit = defineEmits<{(e:'toFather',val:Person):void}>()
let message = ref<Person>({
    name:'Mike',
    age:13,
    job:'teacher'
})
const toFather = ()=>{
    emit('toFather',message.value)
}
</script>

<style lang="scss" scoped>
.Child{
    width: 100px;
    height: 100px;
    background-color: skyblue;
}
</style>

父组件完整代码：

<template>
    <div class="Father">
        <span>父组件</span> 
        {{ receiveMsg?receiveMsg.age:'' }}  
        <Child :msg="msg" @toFather="receiveMsgBySon"></Child> 
    </div>
</template>

<script setup lang="ts">
import Child from './Son.vue'
import {ref} from 'vue'
let msg = ref('ToSon')
interface Person{
    name:string,
    age:number,
    job:string
}
let receiveMsg = ref<Person>() 
const receiveMsgBySon = (val:Person)=>{
    receiveMsg.value = val
}
</script>

<style lang="scss" scoped>
.Father{
    width: 200px;
    height: 200px;
    background-color: tomato;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>