Vue3中父子组件传值

vue3父子组件传值其实和vue2写法差不多

父传子 Props，子传父 emit

父组件代码

<template>
    <div>
        <child :msg="msg" @getmsg="childClick" />
        <div>{{msg1}}</div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import  child  from './Child .vue'
export default defineComponent({
    components: {
        child
    },
    setup() {
        const msg = ref<string>('我是父组件传递过来的值')
        const msg1 = ref<string>('')
        const childClick = (value)=>{
            msg1.value = value
        }
        return {
            msg,
            msg1,
            childClick
        }
    }
})
</script>

子组件代码

<template>
    <div>
        <div>{{ msg }}</div>
        <button @click="onChildClick">子组件按钮</button>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
    props: {
        msg: String
    },
    setup (props, ctx) {
        //ctx作用是获取上下文对象，
        const onChildClick= (val) => {
            ctx.emit('getmsg', '我是子组件传的值')
        }
        return {
            onChildClick
        }
    }
})
</script>

这样就可以了