vue3中常见的两种组件通信（setup语法糖版本）
组件通信
前言
这两天在写项目的时候涉及到一个评论回复的功能，如果我们把这个功能只用一个组件写的话这也太麻烦了，于是想到了采取多个组件化，创建父组件，创建子组件，让他们之间联系起来，便于开发这个功能，但是对vue3中的组件通信遗忘太多，便又学习了一遍，写下了以下心得！
1.props(父传子)
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop“
谨记，在vue3中改为使用defineProps，话不多说，直接上代码：
父组件
<template> <div> <children :message="state.msg"></children> </div> </template> <script setup> import children from './Children' import {reactive} from 'vue' const state = reactive({ msg:'我是父组件的值' }) </script>
子组件
<template> <div> son {{message}} </div> </template> <script setup> import {defineProps} from "vue"; defineProps(['message']) //父传子 </script>
效果如下：
2.emit(子传父)
有小伙伴们就会问了，如果我要传一些点击事件呢，别着急，我们有专门的属性处理—defineEmits,我们可以根据这个属性进行事件处理，话不多说，直接上代码：
父组件
<template> <div> <children @myClick="handleClick"></children> </div> </template> <script setup> import children from './Children' const handleClick = (val) => { console.log(val) } </script>
子组件
<template> <div> <button @click="handleClick">点我啊</button> </div> </template> <script setup> import {defineEmits} from "vue"; const emit = defineEmits(['myClick']) const handleClick =()=>{ emit('myClick','我是子组件的值呀') // 子传父 } </script>
在使用emit时，**切记：**在子组件中定义点击事件，然后使用emit(),里面有两个参数:
第一个参数是你自己起的名字(便于在父组件中调用),
第二个参数是子组件要传过去的值
随后，我们在父组件中”@emit中的第一个参数就行了“,点击后就可以在控制台看到输出了！！！
总结
组件通信能够帮助我们解决很多的问题，最主要的是把组件更加清晰化，每个组件细化到具体的功能，这样的话后期也便于维护！！！
