vue父子组件通信方式有哪些？我们一起了解一下吧！
vue父子组件通信方式有Prop，$emit、$attrs 、 $listeners、provide 、 inject ，sync语法糖和一些其他方式。以下是常用通信方式的具体介绍。
1、prop
这个在我们日常开发当中用到的非常多。简单来说，我们可以通过 Prop 向子组件传递数据。用一个形象的比喻来说，父子组件之间的数据传递相当于自上而下的下水管子，只能从上往下流，不能逆流。这也正是Vue的设计理念之单向数据流。而 Prop 正是管道与管道之间的一个衔接口，这样水（数据）才能往下流。
2、$emit
官方说法是触发当前实例上的事件。附加参数都会传给监听器回调。
大致逻辑如下：当我在页面上点击按钮时，触发了组件 MyButton 上的监听事件 greet，并且把参数传给了回调函数 sayHi 。说白了，当我们从子组件 Emit（派发） 一个事件之前，其内部都提前在事件队列中 On（监听）了这个事件及其监听回调。
3、.sync 修饰符
在 vue@1.x 的时候曾作为双向绑定功能存在，即子组件可以修改父组件中的值。因为它违反了单向数据流的设计理念，所以在 vue@2.0 的时候被干掉了。但是在 vue@2.3.0+ 以上版本又重新引入了这个 .sync 修饰符。但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。说白了就是让我们手动进行更新父组件中的值了，从而使数据改动来源更加的明显。
4、$attrs
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
5、$listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
6、EventBus
思路就是声明一个全局Vue实例变量EventBus，把所有的通信数据，事件监听都存储到这个变量上，这样就到达在组件间实现数据共享，有点类似Vuex。
关于vue父子组件通信方式，我们就分享到这啦！
「绍棠」vue3.0之组件通信之父子通信（二）
在vue3.0中，组件通信官方给出了固定的方法：defineProps、defineEmits，defineExpose、withDefaults，那么接下来我们来看看这四个方法。
一、defineProps定义：
接收props选项相同的值，父子关系（父传子）组件通信，使用自定义属性来向下传值。
代码：
父级： html:（父级通过自定义属性向子级传递） <child ref="children" @handleSubmit="submitData" :age="age" :name="name" ></child> ts: const name = ref('11') const age = ref(12)子级： html:(使用父级传入的内容) <h1>{{ name}} {{age}}</h1> ts:（接收父级传入内容） import { defineProps } from 'vue'; // 引入props，子级需要使用props来接收 defineProps({ name: String, // 定义其数据类型 age: number, // 定义其数据类型 })二、defineEmits
定义：
接收emit选项相同的值，父子之间（子传父）组件通信，使用自定义事件向上级传递。
代码：
子级： html: <button @click="submit">传递</button> // 定义事件 ts: import { defineEmits,ref} from 'vue'; // 引入emits，向父级传递自定义事件 const title = ref('张三'); const emits = defineEmits(['handleSubmit']); // handleSubmit自定义事件 const submit = () => { emits('handleSubmit', title) // 向上传递事件 }父级： html: <child ref="children" @handleSubmit="submitData" ></child> ts: const submitData = (title) => { console.log(title.value) // 获取子级数据 }三、defineExpose
定义：
组件暴露自己的属性，供父级组件来调用，如果不需要则不用写，默认为关闭状态。
代码：
<script lang="ts" setup>/** * 引入依赖 */import { defineExpose } from "vue";const openDialog = () => { console.log('我是子组件')};/** * 导出方法 */defineExpose({ openDialog,});</script>四、withDefaults
定义：
辅助函数，使用时声明props的默认值，对默认值的类型检查，以及返回props的类型删除了已声明默认值属性的可选标志。
代码：
<script lang="ts" setup>/** * 引入 */import { withDefaults, defineProps } from "vue";/** * 定义数据类型 */interface Props { tableData?: Array<any>; total?: number;}/** * 检查默认值类型 */withDefaults(defineProps<Props>(), { tableData: [], // 定义默认值 total: 0,});</script>
