Vue.js框架：vue3版本父子组件之间的传值和事件触发

一、子组件

　　使用vue3官方提供的setup语法糖中给出的defineEmits、defineProps来定义父子间的传参值和关联方法（useContext在3.2版本之后已去除）。

    <script setup lang="ts">
    import { defineProps, defineEmits } from 'vue'

    const emitEvents = defineEmits(['son-click'])
    const props = defineProps({
        message: String
    })

    const sonClick = () =>{
        emitEvents('son-click',"子组件返值")
    }
    </script>
    <template>
        <div>
            <div>
                测试父组件->子组件传值消息:{{ props.message }}
            </div>
            <el-button type="primary" @click="sonClick">
                测试按钮
            </el-button>
        </div>
    </template>

二、父组件

　　父组件中引入子组件，并在使用子组件时传参和定义子组件中事件的回调方法。

    <script setup lang="ts">
    import { ref } from "vue"
    import Son from "./SonComponent.vue"

    let sonMessage = ref("")

    const fatherClick = (context) => {
        sonMessage.value = context
    }
    </script>
    <template>
        <Son message="父组件传值" @son-click="fatherClick"></Son>
        <br />    
        <div>
            测试子组件->父组件传值消息:{{ sonMessage }}
        </div>
    </template>

三、运行结果

　　父组件传值在初始化时直接给到子组件，点击子组件的按钮后通过回调返回到父组件进行展示：

四、数据流转

　　1、父->子传递message参数

　　2、子->父传递sonMessage参数