vue3中setup语法糖下父子组件之间如何传递数据
- 先弄明白什么是父子组件
- 父传子
- 子传父
- 组件间通信都有哪些方式
- 父子组件通信和兄弟组件通信的区别
先弄明白什么是父子组件
⭐父子组件，分为父组件和子组件。
Vue3中，父组件指的是包含一个或多个子组件的组件，它们通过props和事件等方式来传递数据和通信。子组件则是被父组件所包含的组件，它们通常会接收来自父组件的数据，并根据这些数据渲染自身。在Vue3中，使用<template>标签来定义父组件和子组件，同时也可以使用其他标签如<div>, <span>等等。
父传子
在Vue 3的<script setup>语法糖中，父组件向子组件传递数据可以通过props实现。而子组件接收父组件传递过来的数据也是通过props进行。
下面以一个简单的例子来说明：
⭐⭐⭐父组件：（文件名为ParentComponent.vue）
html代码
<template> <div> <h1>{{ message }}</h1> <ChildComponent :childMessage="message" /> </div> </template>
js代码
<script setup> import ChildComponent from './ChildComponent.vue'; const message = 'Hello, Vue3!'; </script>
⭐⭐⭐子组件：（文件名为ChildComponent.vue）
html代码
<template> <div> <h2>{{ childMessage }}</h2> </div> </template>
js代码
<script setup props="['childMessage']"> </script>
在父组件中，我们定义了一个message变量，并将其作为prop传递给子组件。在子组件中，我们通过声明式props接收了父组件传递过来的childMessage变量，并将其显示在页面上。
如此一来，父组件就可以向子组件传递数据了。如果需要更新数据，则可以在父组件中直接修改message变量即可。由于子组件接收的是prop值的副本，所以不会影响到原始数据。
子传父
在Vue 3的<script setup>语法糖中，子组件向父组件传递数据可以通过emit事件实现。而父组件接收子组件传递过来的数据也是通过监听emit事件进行。
⭐⭐⭐父组件：（文件名为ParentComponent.vue）
html代码
<template> <div> <h1>{{ message }}</h1> <ChildComponent @update-message="handleUpdateMessage" /> </div> </template>
js代码
<script setup> import ChildComponent from './ChildComponent.vue'; const message = 'Hello, Vue3!'; function handleUpdateMessage(newMessage) { message.value = newMessage; } </script>
⭐⭐⭐子组件：（文件名为ChildComponent.vue）
html代码
<template> <div> <input v-model="childMessage" /> <button @click="handleClick">Update Message</button> </div> </template>
js代码
<script setup props="['childMessage']" emits="update-message"> import { defineEmits } from 'vue'; const emit = defineEmits(['update-message']); function handleClick() { emit('update-message', childMessage.value); } </script>
同理
在子组件中，我们首先定义了emits属性，并声明了要发射的事件名为update-message。然后，在处理点击事件的函数中，我们通过emit()方法触发了该事件，并将输入框中绑定的childMessage值作为参数传递给了父组件。
在父组件中，我们使用@update-message监听了子组件发射的update-message事件，并调用了名为handleUpdateMessage()的方法来更新父组件的message变量。
如此一来，子组件就可以向父组件传递数据了。如果需要更新数据，则可以在子组件中通过emit事件将新的值传递给父组件。由于父组件监听了该事件，所以会及时接收到传递过来的值，并进行相应的处理。
组件间通信都有哪些方式
在vue框架中，能实现组件间通信的，不只有父子组件一种。总结一下有以下4种：父子组件通信：
通过 props 属性将数据从父组件传递给子组件，通过 $emit方法触发事件并传递数据来实现子组件向父组件通信。
兄弟组件通信：
可以使用一个共同的父组件作为中介，在兄弟组件中分别通过 $parent属性访问该父组件，并通过该父组件来进行数据传递和事件触发。
跨级祖先后代组件通信：
可以使用 provide 和 inject 来进行跨级传递数据，或者使用 event bus（事件总线）等方式来实现。
Vuex 状态管理器：Vuex 是一种专门用于 Vue应用程序状态管理的库。它提供了集中式存储管理应用程序的所有组件的状态，并提供了一些规则来保证状态变更是可预测的。通过 Vuex 的 store 实例，不同的 Vue 组件可以共享同一个状态，并且对这个状态进行更改会被自动监控到。因此，在需要大量复杂交互场景下建议使用Vuex 进行全局状态管理。
父子组件通信和兄弟组件通信的区别
一般最常用的就是父子组件和兄弟组件的通信，两种通信到底有何区别？也可以总结出3点不同之处：
1.父子组件之间的通信是单向的，即父组件向子组件传递数据或子组件向父组件传递数据，而兄弟组件之间的通信是双向的，即兄弟组件之间可以相互传递数据。
2.父子组件之间的通信通常使用props和自定义事件，而兄弟组件之间的通信通常使用Vue的全局事件或Vuex。
3.父子组件之间的通信通常比较简单，适用于组件之间的简单交互，而兄弟组件之间的通信通常比较复杂，适用于组件之间的高级交互，例如多级组件之间的联动。
