vue3组件间通信

• 父传子

        父组件在调用子组件时，直接将要传的数据传递过去

//这里是父组件
<Son message='hi' />

        子组件通过宏定义方法defineProps:({属性名：类型}）来接收数据，接收过来的这些属性就可以直接在template模板中使用；如果想在setup语法糖中使用（也就是script标签中），可以用一个参数来接defineProps，得到的就是一个对象。

//这里是子组件
<script setup>
  const props=defineProps({message:String})

console.log(props.message)//hi

</script>

<template>
{{message}}//hi
</template>

• 子传父

        父组件在调用子组件时，直接将要传的数据传递过去

//这里是父组件
<script>
    const getMessage=(msg)=>{
        console.log(msg)//子组件调用后会打印hi father
    }
</script>


<template>
    <Son @sendMessage='getMessage'/>
<template/>

        子组件通过宏定义方法const emit=defineEmits(['函数名','函数名',...])来接收回调函数，然后通过emit('函数名'，'传的参数')来将数据通过回调函数传递给父组件

//这里是子组件
<script setup>
const emit=defineEmits(['sendMessage'])

emit('sendMessage','hi father')//将数据传递给父组件
<script/>