Vue 框架组件间通信方式

组件间通信方式


不管是 vue2 还是 vue3，组件通信方式很重要，以下是常见的几种通信方式：

  • props：可以实现父子组件、子父组件、甚至兄弟组件通信
  • 自定义事件：可以实现子父组件通信
  • 全局事件总线 $bus：可以实现任意组件通信
  • pubsub：发布订阅模式实现任意组件通信
  • vuex：集中式状态管理容器，实现任意组件通信
  • ref：父组件获取子组件实例 VC，获取子组件的响应式数据以及方法
  • slot：插槽（默认插槽、具名插槽、作用域插槽）实现父子组件通信…

1. props

props 可以实现父子组件通信，在 vue3 中我们可以通过 defineProps 获取父组件传递的数据。且在组件内部不需要引入 defineProps 方法可以直接使用！

父组件给子组件传递数据

<Child info="我爱祖国" :money="money"></Child>

子组件获取父组件传递数据：方式1

let props = defineProps({info: {type: String,//接受的数据类型default: '默认参数',//接受默认数据},money: {type: Number,default: 0}
})

子组件获取父组件传递数据：方式2

let props = defineProps(["info",'money']);

子组件获取到 props 数据就可以在模板中使用了，但是切记 props 是只读的（只能读取，不能修改）

2. 自定义事件

在 vue 框架中事件分为两种：一种是原生的DOM事件，另外一种自定义事件。

原生 DOM 事件可以让用户与网页进行交互，比如 click、dbclick、change、mouseenter、mouseleave、…

自定义事件可以实现子组件给父组件传递数据

2.1 原生DOM事件

代码如下:

 <pre @click="handler">我是祖国的老花骨朵</pre>

当前代码级给 pre 标签绑定原生 DOM 事件点击事件，默认会给事件回调注入 event 事件对象。当然点击事件想注入多个参数可以按照下图操作。但是切记注入的事件对象务必叫做 $event.

  <div @click="handler1(1, 2, 3, $event)">我要传递多个参数</div>

在 vue3 框架 click、dbclick、change（这类原生DOM事件），不管是在标签、自定义标签上（组件标签）都是原生 DOM 事件。

vue2 中却不是这样的，在 vue2 中组件标签需要通过 native 修饰符才能变为原生 DOM 事件

2.2 自定义事件

自定义事件可以实现子组件给父组件传递数据，在项目中是比较常用的。

比如在父组件内部给子组件（Event2）绑定一个自定义事件

<Event2  @xxx="handler3"></Event2>

在 Event2 子组件内部触发这个自定义事件

<template>
<div><h1>我是子组件2</h1><button @click="handler">点击我触发xxx自定义事件</button></div>
</template><script setup lang="ts">let $emit = defineEmits(["xxx"]);const handler = () => {$emit("xxx", "法拉利", "茅台");};
</script>
<style scoped>
</style>

我们会发现在 script 标签内部，使用了 defineEmits 方法，此方法是 vue3 提供的方法，不需要引入直接使用。defineEmits 方法执行，传递一个数组，数组元素即为将来组件需要触发的自定义事件类型，此方执行会返回一个 $emit 方法用于触发自定义事件。

当点击按钮的时候，事件回调内部调用 $emit 方法去触发自定义事件，第一个参数为触发事件类型，第二个、三个、N个参数即为传递给父组件的数据。

需要注意的是：代码如下

<Event2  @xxx="handler3" @click="handler"></Event2>

正常说组件标签书写 @click 应该为原生 DOM 事件，但是如果子组件内部通过 defineEmits 定义就变为自定义事件了

let $emit = defineEmits(["xxx",'click']);

3. 全局事件总线

全局事件总线可以实现任意组件通信，在 vue2 中可以根据 VM 与 VC 关系推出全局事件总线。

但是在 vue3 中没有 Vue 构造函数，也就没有 Vue.prototype，以及组合式API写法没有 this，那么在 Vue3 想实现全局事件的总线功能就有点不现实啦，如果想在 Vue3 中使用全局事件总线功能，可以使用插件 mitt 实现。

mitt 官网

4. v-model

v-model 指令可是收集表单数据（数据双向绑定），除此之外它也可以实现父子组件数据同步。

而 v-model 实指利用 props[modelValue] 与自定义事件 [update: modelValue] 实现的。

下方代码：相当于给组件 Child 传递一个 props(modelValue) 与绑定一个自定义事件 update: modelValue

实现父子组件数据同步

<Child v-model="msg"></Child>

在 vue3 中一个组件可以通过使用多个 v-model，让父子组件多个数据同步，下方代码相当于给组件 Child 传递两个 props 分别是 pageNo 与 pageSize，以及绑定两个自定义事件 update: pageNo 与 update: pageSize 实现父子数据同步

<Child v-model:pageNo="msg" v-model:pageSize="msg1"></Child>

5. useAttrs

在 Vue3 中可以利用 useAttrs 方法获取组件的属性与事件（包含：原生DOM事件或者自定义事件)），次函数功能类似于 Vue2 框架中 $attrs 属性与 $listeners 方法。

比如：在父组件内部使用一个子组件 my-button

<my-button type="success" size="small" title='标题' @click="handler"></my-button>

子组件内部可以通过 useAttrs 方法获取组件属性与事件。因此你也发现了，它类似于 props，可以接受父组件传递过来的属性与属性值。需要注意如果 defineProps 接受了某一个属性，useAttrs 方法返回的对象身上就没有相应属性与属性值。

<script setup lang="ts">import {useAttrs} from 'vue';let $attrs = useAttrs();
</script>

6. ref 与 $parent

提及到 ref 可能会想到它可以获取元素的 DOM 或者获取子组件实例的 VC。既然可以在父组件内部通过 ref 获取子组件实例 VC，那么子组件内部的方法与响应式数据父组件可以使用的。

比如：在父组件挂载完毕获取组件实例

父组件内部代码：

<template>
<div><h1>ref与$parent</h1><Son ref="son"></Son></div>
</template><script setup lang="ts">import Son from "./Son.vue";import { onMounted, ref } from "vue";const son = ref();onMounted(() => {console.log(son.value);});
</script>

但是需要注意，如果想让父组件获取子组件的数据或者方法需要通过 defineExpose 对外暴露，因为 vue3 中组件内部的数据对外“关闭的”，外部不能访问

<script setup lang="ts">import { ref } from "vue";//数据let money = ref(1000);//方法const handler = ()=>{ }defineExpose({money,handler})
</script>

$parent 可以获取某一个组件的父组件实例 VC，因此可以使用父组件内部的数据与方法。必须子组件内部拥有一个按钮点击时候获取父组件实例，当然父组件的数据与方法需要通过 defineExpose 方法对外暴露

<button @click="handler($parent)">点击我获取父组件实例</button>

7. provide 与 inject

  • provide（提供）
  • inject（注入）

vue3 提供两个方法 provide 与 inject，可以实现隔辈组件传递参数

组件组件提供数据：provide 方法用于提供数据，此方法执需要传递两个参数，分别提供数据的 key 与提供数据 value

<script setup lang="ts">import {provide} from 'vue';provide('token','admin_token');
</script>

后代组件可以通过 inject 方法获取数据，通过 key 获取存储的数值

<script setup lang="ts">import {inject} from 'vue'let token = inject('token');
</script>

8. pinia

pinia也是集中式管理状态容器，类似于 vuex。但是核心概念没有mutation、modules，使用方式参照官网

9. slot

插槽：默认插槽、具名插槽、作用域插槽可以实现父子组件通信。

9.1 默认插槽

在子组件内部的模板中书写slot全局组件标签

<template>
<div><slot></slot></div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

在父组件内部提供结构：Todo即为子组件,在父组件内部使用的时候，在双标签内部书写结构传递给子组件

注意开发项目的时候默认插槽一般只有一个

<Todo><h1>我是默认插槽填充的结构</h1>
</Todo>

9.2 具名插槽

顾名思义，此插槽带有名字在组件内部留多个指定名字的插槽。

下面是一个子组件内部，模板中留两个插槽

<template>
<div><h1>todo</h1><slot name="a"></slot><slot name="b"></slot></div>
</template>
<script setup lang="ts">
</script><style scoped>
</style>

父组件内部向指定的具名插槽传递结构。需要注意 v-slot：可以替换为 #

<template>
<div><h1>slot</h1><Todo><template v-slot:a>  //可以用#a替换<div>填入组件A部分的结构</div>
</template>
<template v-slot:b>//可以用#b替换
<div>填入组件B部分的结构</div>
</template>
</Todo>
</div>
</template><script setup lang="ts">import Todo from "./Todo.vue";
</script>
<style scoped>
</style>

9.3 作用域插槽

作用域插槽：可以理解为，子组件数据由父组件提供，但是子组件内部决定不了自身结构与外观（样式）

子组件 Todo 代码如下：

<template>
<div><h1>todo</h1><ul><!--组件内部遍历数组--><li v-for="(item,index) in todos" :key="item.id"><!--作用域插槽将数据回传给父组件--><slot :$row="item" :$index="index"></slot></li></ul></div>
</template>
<script setup lang="ts">defineProps(['todos']);//接受父组件传递过来的数据
</script>
<style scoped>
</style>

父组件内部代码如下：

<template>
<div><h1>slot</h1><Todo :todos="todos"><template v-slot="{$row,$index}"><!--父组件决定子组件的结构与外观--><span :style="{color:$row.done?'green':'red'}">{{$row.title}}</span>
</template>
</Todo>
</div>
</template><script setup lang="ts">import Todo from "./Todo.vue";import { ref } from "vue";//父组件内部数据let todos = ref([{ id: 1, title: "吃饭", done: true },{ id: 2, title: "睡觉", done: false },{ id: 3, title: "打豆豆", done: true },]);
</script>
<style scoped>
</style>

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

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

相关文章

SpringBoot学生成绩管理系统设计与实现

SpringBoot学生成绩管理系统设计与实现

概述 幽络源本次分享的基于SpringBoot的学生成绩管理系统项目&#xff0c;采用主流的Java技术栈开发&#xff0c;实现了从学生信息管理到成绩统计分析的全流程数字化管理。 主要内容 管理员功能模块 ​​学生信息管理​​&#xff1a;维护学生基本信息档案&#xff0c;支持…
阅读更多...
青少年编程与数学 02-016 Python数据结构与算法 01课题、算法

青少年编程与数学 02-016 Python数据结构与算法 01课题、算法

青少年编程与数学 02-016 Python数据结构与算法 01课题、算法 一、算法的定义二、算法的设计方法1. 分治法2. 动态规划法3. 贪心算法4. 回溯法5. 迭代法6. 递归法7. 枚举法8. 分支定界法 三、算法的描述方法1. **自然语言描述**2. **流程图描述**3. **伪代码描述**4. **程序设计…
阅读更多...
Java 实现冒泡排序：[通俗易懂的排序算法系列之二]

Java 实现冒泡排序：[通俗易懂的排序算法系列之二]

引言 大家好！欢迎来到我的排序算法系列第二篇。今天，我们将学习另一种非常基础且广为人知的排序算法——冒泡排序 (Bubble Sort)。 冒泡排序的名字非常形象，它模拟了水中气泡上升的过程：较小（或较大）的元素会像气泡一样，通过不断交换，逐渐“浮”到数组的一端。 什么是…
阅读更多...
struct结构体、union联合体和枚举

struct结构体、union联合体和枚举

目录 一、结构体的声明和使用 1.1 结构体正常声明和创建 1.2 结构体特殊声明 1.3 结构体的自引用 二、结构体内存对齐 2.1 对齐规则 2.2 #pragma修改 三、结构体传参 四、结构体位段 4.1 位段内存分配 4.2 位段内存应用 五、结构体中的柔性数组概念 六、union联合…
阅读更多...
大模型本地部署系列（2） Ollama部署DeepSeek-R1

大模型本地部署系列（2） Ollama部署DeepSeek-R1

成功运行截图 部署步骤 我们进入到ollama的官网&#xff1a; Ollama​ollama.com/​编辑 找到上方的Models &#xff0c;然后点击 此时会跳转到模型列表页面&#xff1a; 点击 deepseek-r1 链接进去&#xff0c;此时我们会看到下拉框中有各个版本的大模型&#xff0c;越往后…
阅读更多...
绘制动态甘特图（以流水车间调度为例）

绘制动态甘特图（以流水车间调度为例）

import matplotlib.pyplot as plt import matplotlib.animation as animation import numpy as np from matplotlib import cm# 中文字体配置&#xff08;必须放在所有绘图语句之前&#xff09; plt.rcParams[font.sans-serif] [SimHei] plt.rcParams[axes.unicode_minus] Fa…
阅读更多...
PyTorch实现线性回归的基础写法与封装API写法

PyTorch实现线性回归的基础写法与封装API写法

目录 1. 基础写法 1.1导包 2.2加载读取数据 2.3原始数据可视化（画图显示） 2.4线性回归的（基础）分解写法 2.5定义训练过程 2.PyTorch实现 线性回归的封装写法（实际项目中的常用写法） 2.1创建线性回归模型 2.2定义损失函数 2.3定义优化器 2.4定义训练过程 1…
阅读更多...
python 常用的6个爬虫第三方库

python 常用的6个爬虫第三方库

Python中有非常多用于网络数据采集的库&#xff0c;功能非常强大&#xff0c;有的用于抓取网页&#xff0c;有的用于解析网页&#xff0c;这里介绍6个最常用的库。 1. BeautifulSoup BeautifulSoup是最常用的Python网页解析库之一&#xff0c;可将 HTML 和 XML 文档解析为树形…
阅读更多...
基于BP神经网络的杂草智能识别系统（杂草识别、Python项目）

基于BP神经网络的杂草智能识别系统（杂草识别、Python项目）

基于BP神经网络的杂草智能识别系统 项目介绍 本项目是一个基于PyQt5和BP神经网络的杂草智能识别系统。系统通过图像处理和神经网络技术&#xff0c; 能够识别8种不同的杂草类别。用户可以通过上传图片&#xff0c;系统会自动识别图片中的杂草类别&#xff0c;并显示识别结果和…
阅读更多...
Python3笔记之号称替代pip的uv包管理器

Python3笔记之号称替代pip的uv包管理器

uv是什么&#xff1f; uv&#xff0c;这是一个由 Astral 团队开发的极快速的Python包和项目管理工具&#xff0c;用Rust语言编写。它集成了多种功能&#xff0c;旨在替代pip、pip-tools、pipx、poetry、pyenv、twine、virtualenv等多个工具&#xff0c;提供更高效、更全面的Py…
阅读更多...
IT管理思路

IT管理思路

甲方CIO和IT管理者-如何做好组织级IT能力提升_哔哩哔哩_bilibili
阅读更多...
ChatGPT的GPT-4o创建图像Q版人物提示词实例展示

ChatGPT的GPT-4o创建图像Q版人物提示词实例展示

最近感觉GPT-4o发布的新功能真的强大&#xff0c;所以总结了一些提示词分享给大家&#xff0c;大家可以去试试&#xff0c;玩法多多&#xff0c;可以用GPT-4o生成图片&#xff0c;然后用可灵进行图生视频&#xff0c;就能去发布视频了&#xff01;接下来和笔者一起来试试&#…
阅读更多...
Transformer Decoder Block的几个优化方案

Transformer Decoder Block的几个优化方案

写在前面 在大型语言模型（LLM）的演进浪潮中，Transformer 架构凭借其强大的并行计算能力和对长距离依赖的出色捕捉，奠定了核心地位。然而，标准的 Transformer Decoder Block 遵循着一种相对固定的模式：先进行自注意力（Self-Attention）捕捉上下文信息，再通过前馈神经网…
阅读更多...
五种IO模型与select和poll分别实现多路转接

五种IO模型与select和poll分别实现多路转接

五种IO模型与select和poll分别实现多路转接 何为IO 不论是在前面文件部分&#xff0c;还是后面的网络部分&#xff0c;IO都是非常常见的。但是当时只是简单对IO进行提及&#xff0c;并没有对IO的本质进行介绍。那么到底何为IO&#xff1f;IO全称为输入和输出&#xff0c;而任…
阅读更多...
单例模式的写法（保证线程安全）

单例模式的写法（保证线程安全）

1. 引言 1.1 什么是单例模式&#xff1f; 单例模式&#xff08;Singleton Pattern&#xff09;是一种创建型设计模式&#xff0c;它确保一个类只有一个实例&#xff0c;并提供一个全局访问点。 核心思想&#xff1a;控制实例化过程&#xff0c;避免重复创建对象。 1.2 为什么…
阅读更多...
C++ 环境设置

C++ 环境设置

C++ 环境设置 引言 C++作为一种高性能的编程语言，广泛应用于系统软件、游戏开发、实时系统等领域。为了能够顺利进行C++编程，我们需要在计算机上配置合适的开发环境。本文将详细讲解如何在Windows、macOS和Linux系统中设置C++开发环境。 Windows系统下C++环境设置 1. 安装…
阅读更多...
【Kafka基础】ZooKeeper在Kafka中的核心作用：分布式系统中枢神经系统

【Kafka基础】ZooKeeper在Kafka中的核心作用：分布式系统中枢神经系统

在分布式系统的世界里&#xff0c;协调和管理多个节点间的状态是一项复杂而关键的任务。Apache Kafka作为一款高性能的分布式消息系统&#xff0c;其设计哲学是"专为单一目的而优化"——即高效处理消息流。为了实现这一目标&#xff0c;Kafka选择将集群协调管理的重任…
阅读更多...
＜《AI大模型应知应会100篇》第8篇：大模型的知识获取方式及其局限性

＜《AI大模型应知应会100篇》第8篇：大模型的知识获取方式及其局限性

第8篇&#xff1a;大模型的知识获取方式及其局限性 摘要 大模型&#xff08;如GPT、BERT、Qwen、DeepSeek等&#xff09;凭借其卓越的自然语言处理能力&#xff0c;已经成为人工智能领域的明星。然而&#xff0c;这些模型“知道”什么&#xff1f;它们如何获取知识&#xff1f…
阅读更多...
ESModule和CommonJS在Node中的区别

ESModule和CommonJS在Node中的区别

ESModule console.log(require);//>errorconsole.log(module);//>errorconsole.log(exports);//>errorconsole.log(__filename);//>errorconsole.log(__dirname);//>error全部报错commonjs console.log(require);console.log(module);console.log(exports);co…
阅读更多...
Spring Boot 配置文件加载优先级全解析

Spring Boot 配置文件加载优先级全解析

精心整理了最新的面试资料和简历模板&#xff0c;有需要的可以自行获取 点击前往百度网盘获取 点击前往夸克网盘获取 Spring Boot 配置文件加载优先级全解析 Spring Boot 的配置文件加载机制是开发者管理不同环境配置的核心功能之一。其通过外部化配置&#xff08;Externaliz…
阅读更多...
最新文章

Copyright @ 2022~2023