vue3中setup语法糖下父子组件间传递数据的方式

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代码

<template>
  <div>
    <h2>{{ childMessage }}</h2>
  </div>
</template>

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

到此这篇关于vue3中setup语法糖下父子组件之间如何传递数据的文章就介绍到这了,更多相关vue3父子组件传递数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论