Vue3---子传父---组合式API

velpro_!

已于 2023-07-02 22:58:23 修改

阅读量158

点赞数

文章标签：前端 javascript 开发语言

于 2023-06-30 00:12:35 首次发布

本文链接：https://blog.csdn.net/weixin_52053631/article/details/131467002

版权

父组件：

<script setup>
import Son from './Son.vue'
const getMsg=(msg)=>{
    console.log(msg)
}
</script>

<template>
    <div>
        <h2>父组件----子传父</h2>
        <!-- 1. 绑定事件-->
        <Son @getMsg="getMsg"></Son>
    </div>
</template>

子组件：

<script setup>
// 2. 通过defineEmits
const emit = defineEmits(['getMsg'])
const sendMsg=()=>{
    emit('getMsg','sonMessage')
}
</script>

<template>
    <div>
        <h2>子组件----子传父</h2>
        <button @click="sendMsg">触发自定义事件</button>
    </div>
</template>