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.父子组件之间的通信通常比较简单，适用于组件之间的简单交互，而兄弟组件之间的通信通常比较复杂，适用于组件之间的高级交互，例如多级组件之间的联动。