Vue3(四):组件通信详解(九种方法)

主要有九种方法,以下是详细解释及使用方法:

1.props

props实现父子间的通信,是使用频率最高的。

(1)父传子:属性值是非函数。

以Father.vue和Child.vue 为例。

父组件中,引入子组件并给子组件绑定一个car参数,

子组件中,使用defineProps([''])接收,在template中,可以直接使用car

(2)子传父:属性值是函数

其实子传父前提父亲先给子传递一个函数,子接收到了再传给父。

比如我要把儿子的toy传给父亲,那么就需要在父中先定义一个getToy函数,用:sendToy=''getToy"传给子,然后子再去调用sendToy。

2.自定义事件emit

1. 概述:

自定义事件常用于:子 => 父

2. 原生Dom事件、自定义事件

(1)原生Dom事件:

  - 事件名是特定的(click、dbdlick、change等等)

  - 事件对象`$event`: 是包含事件相关信息的对象(`pageX`、`pageY`、`target`、`keyCode`)

(2)自定义事件:

  - 事件名是任意名称

  - <strong style="color:red">事件对象`$event`: 是调用`emit`时所提供的数据,可以是任意类型!!!</strong >

  1. vue2中 @click是自定义事件,可以通过.native修饰符变为原生DOM事件。

  2. 在vue3中@click是原生DOM事件

  3. `$event是事件对象

3. 例如:

子组件传给父亲toy,就可以这样做:父组件自定义一个send-toy方法,然后子组件使用defineEmits接收,再用emit传给父亲,之后父亲利用send-toy的回调保存传输过来的toy

3.mitt

1.概述

与消息订阅与发布(`pubsub`)功能类似,可以实现任意组件间通信

就是只要任意两个组件能够摸到emitter,就能实现通信。

2.使用mitt

(1)安装mitt

npm i mitt

(2)新建文件:src\utils\emitter.ts

// 引入mitt 
import mitt from "mitt";

// 创建emitter
const emitter = mitt()

/*
  // 绑定事件
  emitter.on('abc',(value)=>{
    console.log('abc事件被触发',value)
  })
  emitter.on('xyz',(value)=>{
    console.log('xyz事件被触发',value)
  })

  setInterval(() => {
    // 触发事件
    emitter.emit('abc',666)
    emitter.emit('xyz',777)
  }, 1000);

  setTimeout(() => {
    // 清理事件
    emitter.all.clear()
  }, 3000); 
*/

// 创建并暴露mitt
export default emitter

3.使用

 emit触发,on绑定。

比如弟弟child2想要哥哥child1的玩具 ,那child2要用emitter.on绑定事件,然后child1用emitter.emit触发事件。

(注意:这里最好用onUnmounted解绑一下事件,如果有一天这个组件被卸载了,但是他化存在这个关系,就会对内存不友好) 

4.v-model

1.本质

实现父↔子间通信

其实一般很少使用v-model,但是在UI组件库中会大量使用v-model.

2.使用

(1)v-model用在html标签上

v-model本质其实是value和input的结合使用 

<!-- v-model用在html标签上 -->
    <!-- <input type="text" v-model="username"> -->
    <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value">
      <!-- <HTMLInputElement>是说明$event.target是一个html中输入类型的元素 -->

 可以实现双向绑定

(2)v-model用在组件标签

 只需要在组件标签中v-model="username",然后引入UI组件库。

组件标签上的`v-model`的本质:`:moldeValue` + `update:modelValue`事件。

组件标签中: 

<!-- 组件标签上使用v-model指令 -->
   <AtguiguInput v-model="userName"/>
   
   <!-- 组件标签上v-model的本质 -->
   <AtguiguInput :modelValue="userName" @update:model-value="userName = $event"/>
  

 UI组件库中:

<template>
     <div class="box">
       <!--将接收的value值赋给input元素的value属性,目的是:为了呈现数据 -->
   		<!--给input元素绑定原生input事件,触发input事件时,进而触发update:model-value事件-->
       <input 
          type="text" 
          :value="modelValue" 
          @input="emit('update:model-value',$event.target.value)"
       >
     </div>
   </template>
   
   <script setup lang="ts" name="AtguiguInput">
     // 接收props
     defineProps(['modelValue'])
     // 声明事件
     const emit = defineEmits(['update:model-value'])
   </script>

(3) 修改modelValue

 可以修改modelValue的话,就意味着可以在组件标签上使用多个v-model.

多个v-model 

5.$attrs

1. 概述

`$attrs`用于实现当前组件的父组件,向当前组件的子组件通信(祖孙通信)。

2. 具体说明

`$attrs`是一个对象,包含所有父组件传入的标签属性。

   >  注意:`$attrs`会自动排除`props`中声明的属性(可以认为声明过的 `props` 被子组件自己“消费”了)

3.使用

先来了解一下attrs 

首先父向子传递多个响应式数据,但是子只接受一个a,那么剩下的都去哪里了呢。其实在attrs中存着,我们可以用$attrs看到

(1)祖传孙: 

 假如上述父子传递时,子不接收呢?而是用v-bind传给孙组件呢?

那么在孙组件中就可以用defineProps接收,并呈现出来。

这样就实现了祖向孙通信 

(2)孙传祖

在祖里面定义有一个方法

并把方法也传给子

<Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/>

 而子中依旧是这样:

<GrandChild v-bind="$attrs"/>

那么孙中只要接收到了方法,就可以绑定一个点击事件,把自己的定义的数字6传给祖的value,实现孙传祖。

6.$refs、$parent 

1. 概述:

$refs`用于 :父→子

$parent`用于:子→父

2.原理如下

3.使用

(1)ref

 先来看一下用ref是怎么修改的。首先用ref给Child1打个标识c1,然后配置一个修改方法changeToy

之后在child1中配置difineExpose就可以了,这样父就能点击修改子的玩具。实现父到子通信。

// 把数据交给外部
	defineExpose({toy,book})

 同理如果父亲想要修改child2的数据也同理。

(2)$refs

在父组件中用如下写法可以获取所有子组件的实例对象 

<button @click="getAllChild($refs)">获取所有子组件的实例对象</button>

 如图所示:可以获取

那么就可以利用refs修改所有子组件共同想修改的内容,例如修改所有子组件的玩具数量。 

记得在所有子组件里面配置defineExpose

// 把数据交给外部
	defineExpose({toy,book})

 (3)$parent

通过$parent可以看到父组件的实例对象 。这样可以通过在子组件中使用$parent并配置方法,从而修改父组件数据。实现子向父通信。

千万不要忘了在父组件中配置defineExpose

// 向外部提供数据
	defineExpose({house})

7.provide、inject

1.概述

实现祖孙组件直接通信

2. 具体使用

   * 在祖先组件中通过`provide`配置向后代组件提供数据

   * 在后代组件中通过`inject`配置来声明接收数据

3.例如

(1)祖传孙

例如把爷爷有的钱和车子都传给孙,应该怎么做呢?

在父组件中先从vue中import引入provide ,而后使用provide向后代提供数据

provide('名字',值)    需要注意的是这个值后面不要.value,这样会丢失响应式

 

在后代组件中,先import引入inject,而后使用inject接收数据。

需要注意的是,inject('名字','默认值')这2个参数 一个是名字一个是默认值,如果不写默认值的话,上面的car.brand和car.price就会报错。

(2)孙传祖

比如孙子华爷爷的钱。在孙组件里面点击一下按钮就能修改爷爷的钱。

首先在祖组件里面定义一个方法,在provide里面传的是money的值和这个方法给孙组件

那么在孙组件里面可以把传过来的值和方法 利用解构赋值,然后再添加一个按钮绑定这个方法,并传数据。就实现了孙传祖。

8.pinia

详见上一节:Vue3(四):Pinia-CSDN博客

9.slot插槽

假如要实现这样一个效果:

  

1.默认插槽

slot里面是默认内容,如果没有要插进来的内容,就会显示默认内容

//父组件中:
        <Category title="今日热门游戏">
          <ul>
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
          </ul>
        </Category>
//子组件中:
        <template>
          <div class="item">
            <h3>{{ title }}</h3>
            <!-- 默认插槽 -->
            <slot></slot>
          </div>
        </template>

2.具名插槽

在子组件标签里面把需要传递的内容使用template标签包括,用v-slot命名,也可以用#命名。 子组件slot中用相应的name="xxx"

父组件中:
        <Category title="今日热门游戏">
          <template v-slot:s1>
            <ul>
              <li v-for="g in games" :key="g.id">{{ g.name }}</li>
            </ul>
          </template>
          <template #s2>
            <a href="">更多</a>
          </template>
        </Category>
子组件中:
        <template>
          <div class="item">
            <h3>{{ title }}</h3>
            <slot name="s1"></slot>
            <slot name="s2"></slot>
          </div>
        </template>

3.作用域插槽

像下面这样,父组件拿games会报错,因为这时候父组件是拿不到子组件的games的,涉及到一个作用域的内容。 

对于作用域插槽的解释:可以这样理解 

语法及使用:

第一种是使用v-slot="params",意思是吧template里面的内容放在默认插槽里面

第二种是也可以使用命名的方式,因为slot有默认的命名,default,所以可以用#default

10.总结

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Leetcode每日一题】 递归 - 二叉树的所有路径(难度⭐)(59)

1. 题目解析 题目链接&#xff1a;257. 二叉树的所有路径 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 针对二叉树路径的求解问题&#xff0c;我们可以采用深度优先遍历&#xff08;DFS&#xff09;的策略来寻找所…

4.16 java项目小结1

java项目登录界面实现了服务端与客户端的连接&#xff0c;实现了客户端传递输入的账号和密码&#xff0c;服务端从数据库查询&#xff0c;并反馈给客户端。 学习了正则表达式 正则表达式的作用 作用一:校验字符串是否满足规则 作用二:在一段文本中查找满足要求的内容 目前我…

Python 包围盒裁剪卫星场景

下载 Landsat 场景 我们首先下载陆地卫星场景。您可以使用EarthExplorer门户来执行此操作。 数据下载后,您应该有一个下图所示的文件夹。这些是Landsat 2 级科学产品的所有可用文件。我们将处理突出显示的文件。这些是 3 个可见光波段和SR_stac文件。 加载图像和 stac 文件 …

PHP一句话木马

一句话木马 PHP 的一句话木马是一种用于 Web 应用程序漏洞利用的代码片段。它通常是一小段 PHP 代码&#xff0c;能够在目标服务器上执行任意命令。一句话木马的工作原理是利用 Web 应用程序中的安全漏洞&#xff0c;将恶意代码注入到服务器端的 PHP 脚本中。一旦执行&#xf…

Android Room 记录一个Update语句不生效的问题解决记录

代码展示 1.数据实体类 Entity public class User {PrimaryKey(autoGenerate true)private long id;private String name;private String age;private String sex;public User(String name, String age, String sex) {this.name name;this.age age;this.sex sex;}public …

Linux 磁盘管理和文件系统

硬盘的物理结构&#xff1a; 盘片硬盘有多个盘片&#xff0c;每盘片2面磁头每面一个磁头 硬盘的数据结构&#xff1a; 扇区盘片被分为多个扇形区域&#xff0c;扇区:每个扇区存放512字节的数据&#xff0c;硬盘的最小存储单位磁道同一盘片不同半径的同心圆&#xff0c;是由磁…

postgresql|数据库|实时数据库监控利器 pg_activity 的部署和初步使用

前言&#xff1a; postgresql的调优是比较重要的&#xff0c;那么&#xff0c;如何调优呢&#xff1f;自然是在某一个时间段内&#xff0c;通常是业务高峰期或者压测时间内实时观察数据库的运行情况&#xff0c;然后通过观察到的信息判断数据库的瓶颈&#xff0c;比如&#xf…

Windows 安装 A UDP/TCP Assistant 网络调试助手

Windows 安装 A UDP/TCP Assistant 网络调试助手 0. 引言1. 下载地址2. 安装和使用 0. 引言 需要调试一个实时在线聊天程序&#xff0c;安装一个UDP/TCP Assistant 网络调试助手&#xff0c;方便调试。 1. 下载地址 https://github.com/busyluo/NetAssistant/releases 2. 安…

【Android AMS】startActivity流程分析

文章目录 AMSActivityStackstartActivity流程startActivityMayWaitstartActivityUncheckedLocked startActivityLocked(ActivityRecord r, boolean newTask, boolean doResume, boolean keepCurTransition)resumeTopActivityLocked 参考 AMS是个用于管理Activity和其它组件运行…

华为云CodeArts IDE For Python 快速使用指南

CodeArts IDE 带有 Python 扩展&#xff0c;为 Python 语言提供了广泛的支持。Python 扩展可以利用 CodeArts IDE 的代码补全、验证、调试和单元测试等特性&#xff0c;与多种 Python 解释器协同工作&#xff0c;轻松切换包括虚拟环境和 conda 环境的 Python 环境。本文简要概述…

chrome浏览器取消右上方的更新红点提示

在桌面找到chrome浏览器的快捷方式&#xff0c;右键打开属性 在目标 引号后添加 --disable-background-netwroking

git上传代码

git上传代码 先写好本地代码&#xff0c;按照下面步骤操作

初识--Linux的虚拟地址空间

重新了解地址空间 在学习c/c语言的时候,大家一定见过以下这张图 说的是程序会加载在如图的结构上,实际上,我们真的对他很了解吗,而在Linux进程控制这,就会有一个奇怪的现象 前提提要:简要介绍一下fork函数 进程内核数据结构(PCB)自己的代码以及数据 在Linux中,fork可以从当…

Docker Desktop 卡死在 “Starting the Docker Engine“问题解决

docker desktop启动卡死在这个界面长时间没有反应 wsl --status输入以上命令查看wsl状态&#xff0c;发现也是卡死的状态&#xff0c;长时间没有反应&#xff0c;猜测是因为WSL卡死导致的docker desktop卡死的 netsh winsock reset通过以上命令重置 重启电脑后问题解决

【南京艺术学院×朗汀留学】部分录取案例合集

留学申请正在紧张的进行中&#xff0c;作为深耕留学的专业资深团队&#xff0c;朗汀留学成功帮助上千名学生出国留学。 在此我们将部分留学案例作以总结&#xff0c;以供新生参考。再次恭喜所有获得理想大学offer的学生们&#xff0c;你们的努力让梦想照进现实。 学校介绍 南京…

用Scrapy抓取当当网站数据

setting.py实验目的及要求&#xff1a; 【实验目的】 通过本实验了解Scrapy爬虫框架&#xff1b;熟练掌握Scrapy的基本使用方法和常用技巧。 【实验要求】 使用Scrapy框架&#xff0c;抓取网站商品信息&#xff08;京东、淘宝、当当等任选一个&#xff09;&#xff0c;并将结…

实战 K8s ConfigMap:打造动态可配置的云原生应用

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Kubernetes航线图&#xff1a;从船长到K8s掌舵者》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、前言 1、k8s简介 2、ConfigMap简介 二、Con…

社交创新的标杆:解读Facebook的社交模式

引言 在当今数字化时代&#xff0c;社交媒体已成为人们日常生活和沟通的重要工具。作为全球最大的社交媒体平台&#xff0c;Facebook不仅改变了我们的社交模式&#xff0c;而且对全球的社交文化、商业活动和公共事务产生了深远的影响。本文将深入探讨Facebook的社交模式&#…

面试:lock 和 synchronized

一、语法层面 synchronized 是关键字&#xff0c;源码在jvm中&#xff0c;用c语言实现Lock 是接口&#xff0c;源码由jdk提供&#xff0c;用java语言实现使用synchronized时&#xff0c;退出同步代码块锁会自动释放&#xff0c;而使用Lock时&#xff0c;需要手动调用unlock方法…

数学建模完整版

模型与适用题型 微分方程传染病预测模型 神经网络 层次分析法 粒子群算法 matlab 优劣解距离法