Vue组件通信方式

1.props通信

1.1在 Vue 2 中使用 props 通信

注意:props传递的数据是只读的,子组件修改,不会影响父组件

1.1.1.定义 props

在子组件中使用 props 选项来定义要接收的属性

// 子组件
<script>
export default {props: {message: String}
}
</script>
1.1.2.传递props

在父组件中使用子组件时，通过将属性绑定到子组件的属性名来传递数据。

// 父组件
<template><child-component :message="parentMessage"></child-component>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: 'Hello from parent!'};}
}
</script>
1.1.3.接收props
// 子组件
<template><div>{{ message }}</div>
</template><script>
export default {props: {message: String}
}
</script>

1.2在Vue3中使用props通信

在 Vue 3 中，props 的使用方式与 Vue 2 类似，但有一些额外的特性，如默认值和类型校验的语法略有不同。

1.2.1.定义props
// 子组件
<script setup>const props = defineProps({message: String});//或者
const props = defineProps(['message']);
</script>
1.2.2.传递props
// 父组件
<template><child-component :message="parentMessage"></child-component>
</template><script setup>
import ChildComponent from './ChildComponent.vue';const parentMessage=ref('Hello from parent!')
</script>
1.2.3.接收props
// 子组件
<template><div>{{ props.message }}</div>
</template><script setup>
const props = defineProps({message: String});//或者
const props = defineProps(['message']);</script>

2.自定义事件

2.1在vue2中使用自定义事件

2.1.1.触发自定义事件

在子组件中，使用 $emit 方法触发一个自定义事件。

// 子组件
<template><button @click="emitCustomEvent">触发事件</button>
</template><script>
export default {methods: {emitCustomEvent() {this.$emit('custom-event-name', eventData);}}
}
</script>
2.1.2.监听自定义事件

在父组件中，通过在子组件上使用 v-on（或简写为 @）来监听自定义事件。

// 父组件
<template><child-component @custom-event-name="handleCustomEvent"></child-component>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {handleCustomEvent(eventData) {// 处理自定义事件触发的逻辑}}
}
</script>

2.2在 Vue 3 中使用自定义事件通信

2.2.1.触发自定义事件

在子组件中，首先，我们导入了 defineEmits 函数，然后使用它来定义可触发的自定义事件，就像之前的示例一样。接下来，我们创建了 emitCustomEvent 函数来触发自定义事件。请注意，eventData 是事件数据的占位符，您可以根据需要替换为实际的事件数据。

<template><div><button @click="emitCustomEvent">触发自定义事件</button></div>
</template><script setup>
import { defineEmits } from 'vue';// 使用 defineEmits 定义可触发的自定义事件
const emits = defineEmits(['custom-event-name']);// 创建一个函数来触发自定义事件
const emitCustomEvent = () => {emits('custom-event-name', eventData);
};
</script>
2.2.2.监听自定义事件

我们在父组件的 <template> 部分使用 @custom-event-name（或 v-on:custom-event-name）来监听子组件触发的名为 custom-event-name 的自定义事件。然后，在 <script setup> 部分，我们通过定义 handleCustomEvent 函数来处理自定义事件触发的逻辑。

<template><div><child-component @custom-event-name="handleCustomEvent"></child-component></div>
</template><script setup>
import ChildComponent from './ChildComponent.vue';// 监听子组件触发的自定义事件
const handleCustomEvent = (eventData) => {// 处理自定义事件触发的逻辑console.log('自定义事件触发了，事件数据：', eventData);
};
</script>

 

3.全局事件总线通信

3.1在 Vue 2 中使用全局事件总线

3.1.1.创建全局事件总线

在一个单独的 Vue 实例上添加事件总线，通常在一个单独的文件中。

// EventBus.jsimport Vue from 'vue';
export const EventBus = new Vue();
3.1.2.触发事件

在任何组件中，您可以使用 $emit 方法来触发事件。

// 发送组件
<script>
import { EventBus } from './EventBus.js';export default {methods: {sendData() {EventBus.$emit('custom-event-name', eventData);}}
}
</script>
3.1.3.监听事件

在任何组件中，您可以使用 $emit 方法来触发事件。

// 发送组件
<script>
import { EventBus } from './EventBus.js';export default {methods: {sendData() {EventBus.$emit('custom-event-name', eventData);}}
}
</script>

3.2在Vue3中使用全局事件总线

首先安装第三方插件 mitt（也称为 Micro Event Emitter）来实现事件总线的功能，这对于在 Vue 3 中进行组件通信是一种常见的方法。mitt 是一个轻量级的事件发射器库，可以用于处理事件的触发和监听。

3.2.1安装插件
npm install mitt
3.2.2使用mitt
// EventBus.js
import mitt from 'mitt';// 创建事件总线实例
const emitter = mitt();export default emitter;
3.2.3.触发事件
// 发送组件
<template><button @click="sendData">触发事件</button>
</template><script setup>
import emitter from './EventBus.js';const sendData = () => {emitter.emit('custom-event-name', eventData);
}
</script>
3.2.4.监听事件
// 接收组件
<template><div></div>
</template><script setup>
import emitter from './EventBus.js';emitter.on('custom-event-name', eventData => {// 处理事件数据
});
</script>

我们创建了一个名为 EventBus.js 的文件，其中包含了 mitt 的实例，这个实例被用作事件总线。然后，在发送组件和接收组件中，我们都导入了 EventBus.js 并使用它来触发和监听自定义事件。

 

4.provide与inject通信

4.1在vue2中使用provide与inject通信

在 Vue 2 中，provide 和 inject 是通过父组件向子孙组件传递数据的一种方式。父组件使用 provide 提供数据，然后子孙组件使用 inject 来注入这些数据。

 4.1.2.父组件
<template><div><child-component></child-component></div>
</template><script>
export default {provide: {message: 'Hello from parent!'}
}
</script>
 4.1.2.子组件
<template><div><grandchild-component></grandchild-component></div>
</template><script>
export default {inject: ['message'],mounted() {console.log(this.message); // 输出：Hello from parent!}
}
</script>

4.2在 Vue 3 中使用 provide 和 inject

在 Vue 3 中，provide 和 inject 的使用方式与 Vue 2 类似，但有一些改进，特别是在 TypeScript 和 Composition API 中的使用更方便。

4.2.1.父组件
<template><div><child-component></child-component></div>
</template><script  setup>
import { provide } from 'vue';
provide('message', 'Hello from parent!');
</script>
4.2.1.子组件
<template><div><grandchild-component></grandchild-component></div>
</template><script setup>
import { inject } from 'vue';const message = inject('message');// 使用注入的数据
console.log(message); // 输出：Hello from parent!</script>

Vue 3 的 Composition API 使得在 setup 函数中更容易使用 provide 和 inject。在 setup 中提供的数据会自动反应到子组件中，无需额外的设置。此外，由于 Vue 3 更好地支持 TypeScript，因此类型检查更加准确。

5.Pinia和Vuex

状态管理工具

详细查看一下博客

Piniaicon-default.png?t=N7T8http://t.csdnimg.cn/22mmUVueXicon-default.png?t=N7T8http://t.csdnimg.cn/hvOi4

6.插槽实现通信

Vue 中的插槽（slot）是一种用于在父组件中向子组件传递内容的机制，而不仅仅是数据通信。通过插槽，您可以将任何内容（如文本、HTML、其他组件等）传递给子组件，并在子组件中进行渲染。虽然插槽主要用于渲染内容，但您仍然可以在插槽中包含数据，并且通过插槽的方式进行通信。

6.1在父组件中传递数据给子组件并实现通信

<!-- ParentComponent.vue -->
<template><div><child-component><!-- 通过插槽向子组件传递数据 --><template #custom-slot><p>{{ message }}</p><button @click="sendMessage">发送消息</button></template></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {message: 'Hello from parent!'};},methods: {sendMessage() {this.message = 'Message sent from parent!';}}
};
</script>

6.2在子组件中接收插槽内容并实现通信

<!-- ChildComponent.vue -->
<template><div><slot name="custom-slot"></slot></div>
</template><script>
export default {// 子组件可以在这里接收插槽内容mounted() {const customSlotContent = this.$slots['custom-slot'];// 监听按钮点击事件并触发通信customSlotContent[1].componentInstance.$on('click', () => {this.$emit('custom-event', 'Message received in child!');});}
};
</script>

父组件 ParentComponent 包含了一个名为 custom-slot 的插槽，其中包含了一个段落元素和一个按钮。父组件通过插槽向子组件 ChildComponent 传递了数据和一个触发通信的按钮。

子组件 ChildComponent 接收了插槽内容，并在其中监听按钮的点击事件。当按钮被点击时，子组件触发了一个自定义事件 custom-event，并将消息作为参数传递给父组件。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/120890.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

预编译（1）

预编译（1）

目录 预定义符号&#xff1a; 使用&#xff1a; 结果&#xff1a; 预编译前后对比&#xff1a; #define定义常量&#xff1a; 基本语法&#xff1a; 举例1&#xff1a; 结果&#xff1a; 预编译前后对比&#xff1a; 举例2&#xff1a; 预编译前后对比&#xff1a; 注…
阅读更多...
Lua表公共操作

Lua表公共操作

--表的公共操作 t1 {{age 1,name "123"},{age 2,name "456"}} t2 {name "Holens" , sex true} --插入 print(#t1) table.insert(t1,t2) print(#t1) print(t1[3].sex) print("*************************************")--删除 -…
阅读更多...
wordpress插件-免费的wordpress全套插件

wordpress插件-免费的wordpress全套插件

在当今数字化时代&#xff0c;网站和博客已经成为信息传递、观点分享和商业交流的重要平台。在这个背景下&#xff0c;WordPress作为最受欢迎的内容管理系统之一&#xff0c;无疑扮演着至关重要的角色。然而&#xff0c;要保持一个成功的WordPress网站&#xff0c;不仅需要出色…
阅读更多...
关于操作系统与内核科普

关于操作系统与内核科普

关于操作系统与内核科普 一.什么是操作系统 操作系统是管理计算机硬件与软件资源的计算机程序。它为计算机硬件和软件提供了一种中间层。 操作系统是一种软件&#xff0c;主要目的有三种&#xff1a; 一.管理计算机资源&#xff0c;这些资源包括CPU&#xff0c;内存&#xff0…
阅读更多...
【算法分析与设计】动态规划（下）

【算法分析与设计】动态规划（下）

目录 一、最长公共子序列1.1 最长公共子序列的结构1.2 子问题的递归结构1.3 计算最优值1.4 举例说明1.5 算法的改进 二、最大子段和2.1 代码2.2 最大子段和问题的分治算法2.3 代码2.4 分治算法的时间复杂度2.5 最大子段和问题的动态规划算法 三、凸多边形最优三角剖分3.1 三角剖…
阅读更多...
uniapp iOS离线打包——如何创建App并提交版本审核？

uniapp iOS离线打包——如何创建App并提交版本审核？

uniapp 如何创建App&#xff0c;并提交版本审核&#xff1f; 文章目录 uniapp 如何创建App&#xff0c;并提交版本审核&#xff1f;登录 appstoreconnect创建AppiOS 预览和截屏应用功能描述技术支持App 审核信息 App 信息内容版权年龄分级 价格与销售范围App 隐私提交审核 登录…
阅读更多...
微信公众号网页授权登录获取用户基本信息

微信公众号网页授权登录获取用户基本信息

概述 微信公众号网页授权登录后微信获取用户基本信息&#xff0c;部署即可运行完整demo 详细 一、前言 &#xff08;1&#xff09;适合人群 1&#xff0c;JAVA服务端开发人员 2&#xff0c;初级人员开发人员 3&#xff0c;了解spring springboot maven 3&#xff0c;了…
阅读更多...
共享办公室行业当前发展现状和未来发展前景

共享办公室行业当前发展现状和未来发展前景

共享办公室行业是近年来迅速发展并受到广泛关注的一种办公模式。它为个人和企业提供了灵活、高效且经济实惠的办公环境。在过去的几年里&#xff0c;共享办公室行业经历了飞速增长并发生了巨大的变革&#xff0c;已经成为全球商业地产市场不可或缺的一部分。然而&#xff0c;共…
阅读更多...
ORACLE 内存结构之系统全局区（SGA）

ORACLE 内存结构之系统全局区（SGA）

每个 Oracle 数据库实例都会在内存中分配一个很大的内存结构&#xff0c; 称为系统全局区(System Global Area), 这是一个大型的共享内存结构,每个Oracle进程都会访问它。 在Linux/Unix操作系统上,SGA是一个物理实体&#xff0c;使用操作系统命令能“看到它”。 它被操作系…
阅读更多...
【C++11】多线程

【C++11】多线程

多线程创建线程thread提供的成员函数获取线程id的方式线程函数参数的问题线程join场景和detach 互斥量库&#xff08;mutex&#xff09;mutexrecursive_mutexlock_guard 和 unique_lock 原子性操作库&#xff08;atomic&#xff09;条件变量库&#xff08;condition_varuable&a…
阅读更多...
Python 基于 Yolov8 + CPU 实现物体检测

Python 基于 Yolov8 + CPU 实现物体检测

目录 一、开发环境 二、安装 Python 基于 Yolov8 物体检测关联库 2.1 打开命令提示符&#xff08;cmd&#xff09;或终端&#xff0c;安装库 2.2 关联库安装过程遇到的问题 三、基于 Yolov8 物体检测代码实现&#xff08;完整&#xff09; 3.1 Yolov8 物体检测完整代码…
阅读更多...
（二）Python编程环境搭建

（二）Python编程环境搭建

本章重点介绍 Python 编程环境的搭建&#xff0c;包括各个平台下 Python 的下载和安装&#xff0c;常见 IDE 的使用&#xff0c;如何运行 Python 程序等。还会亲自带着大家编写并运行第一个 Python 程序&#xff0c;让大家认识一下最简单的 Python 代码。 本章的后半部分还介绍…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023