vue3组件通信（组合式API）

news2025/1/12 20:45:07

vue3组件通信（组合式API）

vue3组件通信，采用组合式API。选项式API，参看官网

Vue3组件通信和Vue2的区别：

  • 移出事件总线，使用mitt代替。
  • vuex换成了pinia。
  • 把.sync优化到了v-model里面了。
  • 把$listeners所有的东西，合并到$attrs中了。
  • $children被砍掉了。

常见搭配形式：
在这里插入图片描述

6.1. 【props】

概述：props是使用频率最高的一种通信方式，常用与 ：父 ↔ 子。

  • 若 父传子：属性值是非函数。
  • 若 子传父：属性值是函数。

父组件：

<template>
  <div class="father">
    <h3>父组件，</h3>
		<h4>我的车：{{ car }}</h4>
		<h4>儿子给的玩具：{{ toy }}</h4>
		<Child :car="car" :getToy="getToy"/>
  </div>
</template>

<script setup lang="ts" name="Father">
	import Child from './Child.vue'
	import { ref } from "vue";
	// 数据
	const car = ref('奔驰')
	const toy = ref()
	// 方法
	function getToy(value:string){
		toy.value = value
	}
</script>

子组件

<template>
  <div class="child">
    <h3>子组件</h3>
		<h4>我的玩具：{{ toy }}</h4>
		<h4>父给我的车：{{ car }}</h4>
		<button @click="getToy(toy)">玩具给父亲</button>
  </div>
</template>

<script setup lang="ts" name="Child">
	import { ref } from "vue";
	const toy = ref('奥特曼')
	
	defineProps(['car','getToy'])
</script>

6.2. 【自定义事件】

  1. 概述：自定义事件常用于：子 => 父。
  2. 注意区分好：原生事件、自定义事件。
  • 原生事件：
    • 事件名是特定的（click、mosueenter等等）
    • 事件对象$event: 是包含事件相关信息的对象（pageX、pageY、target、keyCode）
  • 自定义事件：
    • 事件名是任意名称
    • 事件对象$event: 是调用emit时所提供的数据，可以是任意类型！！！

  1. 示例：

    <!--在父组件中，给子组件绑定自定义事件：-->
<Child @send-toy="toy = $event"/>

<!--注意区分原生事件与自定义事件中的$event-->
<button @click="toy = $event">测试</button>

    //子组件中，触发事件：
this.$emit('send-toy', 具体数据)

6.3. 【mitt】

概述：与消息订阅与发布（pubsub）功能类似，可以实现任意组件间通信。

安装mitt

npm i mitt

新建文件：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

接收数据的组件中：绑定事件、同时在销毁前解绑事件：

import emitter from "@/utils/emitter";
import { onUnmounted } from "vue";

// 绑定事件
emitter.on('send-toy',(value)=>{
  console.log('send-toy事件被触发',value)
})

onUnmounted(()=>{
  // 解绑事件
  emitter.off('send-toy')
})

【第三步】：提供数据的组件，在合适的时候触发事件

import emitter from "@/utils/emitter";

function sendToy(){
  // 触发事件
  emitter.emit('send-toy',toy.value)
}

注意这个重要的内置关系，总线依赖着这个内置关系

6.4.【v-model】

  1. 概述：实现 父↔子 之间相互通信。

  2. 前序知识 —— v-model的本质

    <!-- 使用v-model指令 -->
<input type="text" v-model="userName">

<!-- v-model的本质是下面这行代码 -->
<input 
  type="text" 
  :value="userName" 
  @input="userName =(<HTMLInputElement>$event.target).value"
>

  3. 组件标签上的v-model的本质：:moldeValue ＋ update:modelValue事件。

    <!-- 组件标签上使用v-model指令 -->
<AtguiguInput v-model="userName"/>

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

    AtguiguInput组件中：

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

  4. 也可以更换value，例如改成abc

    <!-- 也可以更换value，例如改成abc-->
<AtguiguInput v-model:abc="userName"/>

<!-- 上面代码的本质如下 -->
<AtguiguInput :abc="userName" @update:abc="userName = $event"/>

    AtguiguInput组件中：

    <template>
  <div class="box">
    <input 
       type="text" 
       :value="abc" 
       @input="emit('update:abc',$event.target.value)"
    >
  </div>
</template>

<script setup lang="ts" name="AtguiguInput">
  // 接收props
  defineProps(['abc'])
  // 声明事件
  const emit = defineEmits(['update:abc'])
</script>

  5. 如果value可以更换，那么就可以在组件标签上多次使用v-model

    <AtguiguInput v-model:abc="userName" v-model:xyz="password"/>

6.5.【$attrs 】

  1. 概述：$attrs用于实现当前组件的父组件，向当前组件的子组件通信（祖→孙）。

  2. 具体说明：$attrs是一个对象，包含所有父组件传入的标签属性。

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

父组件：

<template>
  <div class="father">
    <h3>父组件</h3>
		<Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/>
  </div>
</template>

<script setup lang="ts" name="Father">
	import Child from './Child.vue'
	import { ref } from "vue";
	let a = ref(1)
	let b = ref(2)
	let c = ref(3)
	let d = ref(4)

	function updateA(value){
		a.value = value
	}
</script>

子组件：

<template>
	<div class="child">
		<h3>子组件</h3>
		<GrandChild v-bind="$attrs"/>
	</div>
</template>

<script setup lang="ts" name="Child">
	import GrandChild from './GrandChild.vue'
</script>

孙组件：

<template>
	<div class="grand-child">
		<h3>孙组件</h3>
		<h4>a：{{ a }}</h4>
		<h4>b：{{ b }}</h4>
		<h4>c：{{ c }}</h4>
		<h4>d：{{ d }}</h4>
		<h4>x：{{ x }}</h4>
		<h4>y：{{ y }}</h4>
		<button @click="updateA(666)">点我更新A</button>
	</div>
</template>

<script setup lang="ts" name="GrandChild">
	defineProps(['a','b','c','d','x','y','updateA'])
</script>

6.6. 【$refs、$parent】

  1. 概述：

    • $refs用于 ：父→子。
    • $parent用于：子→父。

  2. 原理如下：

    属性说明
    $refs值为对象，包含所有被ref属性标识的DOM元素或组件实例。
    $parent值为对象，当前组件的父组件实例对象。

6.7. 【provide、inject】

  1. 概述：实现祖孙组件直接通信

  2. 具体使用：

    • 在祖先组件中通过provide配置向后代组件提供数据
    • 在后代组件中通过inject配置来声明接收数据

  3. 具体编码：

    【第一步】父组件中，使用provide提供数据

    <template>
  <div class="father">
    <h3>父组件</h3>
    <h4>资产：{{ money }}</h4>
    <h4>汽车：{{ car }}</h4>
    <button @click="money += 1">资产+1</button>
    <button @click="car.price += 1">汽车价格+1</button>
    <Child/>
  </div>
</template>

<script setup lang="ts" name="Father">
  import Child from './Child.vue'
  import { ref,reactive,provide } from "vue";
  // 数据
  let money = ref(100)
  let car = reactive({
    brand:'奔驰',
    price:100
  })
  // 用于更新money的方法
  function updateMoney(value:number){
    money.value += value
  }
  // 提供数据
  provide('moneyContext',{money,updateMoney})
  provide('car',car)
</script>

    注意：子组件中不用编写任何东西，是不受到任何打扰的

    【第二步】孙组件中使用inject配置项接受数据。

    <template>
  <div class="grand-child">
    <h3>我是孙组件</h3>
    <h4>资产：{{ money }}</h4>
    <h4>汽车：{{ car }}</h4>
    <button @click="updateMoney(6)">点我</button>
  </div>
</template>

<script setup lang="ts" name="GrandChild">
  import { inject } from 'vue';
  // 注入数据
 let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(x:number)=>{}})
  let car = inject('car')
```

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

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

相关文章

fo-dicom开源库，深入理解项目的模块化设计

fo-dicom开源库，深入理解项目的模块化设计

前言 DICOM&#xff08;Digital Imaging and Communications in Medicine&#xff09;是医学图像和相关信息的国际标准&#xff0c;广泛应用于医学影像领域。FO-DICOM是一个开源的DICOM库&#xff0c;提供了丰富的功能和模块&#xff0c;用于处理DICOM数据、实现DICOM网络通信…
阅读更多...
16.面试算法-树的层次遍历与相关面试题

16.面试算法-树的层次遍历与相关面试题

1. 树的层次遍历与相关面试题 1.1 层次遍历简介 广度优先在面试里出现的频率非常高&#xff0c;但是相对简单&#xff0c;题目也比较少&#xff0c;常见的题目也就七八道。 广度优先又叫层次遍历&#xff0c;基本过程如下&#xff1a; 层次遍历就是从根节点开始&#xff0c…
阅读更多...
【STM32】 TCP/IP通信协议（1）

【STM32】 TCP/IP通信协议（1）

一、前言 TCP/IP是干啥的&#xff1f;它跟SPI、IIC、CAN有什么区别&#xff1f;它如何实现stm32的通讯&#xff1f;如何去配置&#xff1f;为了搞懂这些问题&#xff0c;查询资料可解决如下疑问&#xff1a; 1.为什么要用以太网通信? 以太网(Ethernet) 是指遵守 IEEE 802.3 …
阅读更多...
【mbti课堂】计算机系统的六个层次与指令系统

【mbti课堂】计算机系统的六个层次与指令系统

课件&#xff1a;可以从 6 个层次分析和看待计算机系统的基本组成。 指令系统层处在硬件系统和软 件系统之间&#xff0c; 是硬、 软件之间的接口部分&#xff0c; 对两部分都有重要影响。 硬件系统用于实现每条指令的功能&#xff0c; 解决指令之间的衔接关系&#xff1b; 软件…
阅读更多...
Golang | Leetcode Golang题解之第437题路径总和III

Golang | Leetcode Golang题解之第437题路径总和III

题目&#xff1a; 题解&#xff1a; func pathSum(root *TreeNode, targetSum int) (ans int) {preSum : map[int64]int{0: 1}var dfs func(*TreeNode, int64)dfs func(node *TreeNode, curr int64) {if node nil {return}curr int64(node.Val)ans preSum[curr-int64(targ…
阅读更多...
复杂网络分析_NetworkX

复杂网络分析_NetworkX

一&#xff1a;NetworkX简介 NetworkX库是一个用于创建、操作复杂网络的结构、动态和功能的Python库。在经济网络中&#xff0c;它可以帮助分析各种经济实体&#xff08;如公司、个人、国家&#xff09;之间的相互关系和互动模式。以下是一些NetworkX在经济网络分析中的实际应…
阅读更多...
ArrayList源码实现（一）

ArrayList源码实现（一）

ArrayList源码实现&#xff08;一&#xff09; 1. ArrayList的大小是如何自动增加的&#xff1f; 初始化 在构造函数中&#xff0c;可以设定列表的初始值大小&#xff0c;如果没有的话默认使用&#xff0c;提供的静态数据 public ArrayList(int initialCapacity) {if (initi…
阅读更多...
Milvus - 架构设计详解

Milvus - 架构设计详解

Milvus 是一个专为在大规模密集向量数据集上进行相似性搜索而设计的开源向量数据库系统。其架构建立在流行的向量搜索库之上&#xff0c;如 Faiss、HNSW、DiskANN 和 SCANN&#xff0c;能够处理数百万、数十亿甚至数万亿的向量数据。为了全面了解 Milvus 架构&#xff0c;我们首…
阅读更多...
计网作业3

计网作业3

1.交换机是依据 MAC地址 来转发数据包的 2.数据链路层 负责将数据封装成帧&#xff0c;在相邻节点间进行传输 数据链路层负责以下任务&#xff1a; 封装数据 物理地址寻址&#xff1a;使用MAC地址进行寻址&#xff0c;确保数据能够在局域网中正确传输到目标节点 介质访问控…
阅读更多...
正确理解C++的友元friend

正确理解C++的友元friend

C的友元&#xff08;friend&#xff09;是个很重要的概念&#xff0c;该如何正确理解呢&#xff1f;本文将以友元函数为例讲解一下&#xff0c;仔细看。 友元的特性&#xff1a; 1、使用friend修饰的成员函数可以访问其他成员的私有成员(private)和保护成员(protected)。 2、…
阅读更多...
快速上手基于Vue的动画引擎vueuse/motion

快速上手基于Vue的动画引擎vueuse/motion

在现代前端开发中&#xff0c;动画可以极大地提升用户体验和界面美感。VueUse Motion 是一个强大的动画库&#xff0c;旨在为 Vue 应用提供简单易用的动画功能。那我们就来看看它在Vue项目中是如何应用的&#xff0c;快速手上为主&#xff0c;官网地址&#x1f447; vueuse/mo…
阅读更多...
DevExpress WinForms中文教程：Data Grid - 如何添加或删除行？

DevExpress WinForms中文教程：Data Grid - 如何添加或删除行？

本教程介绍DevExpress WinForm的Data Grid控件UI元素和API&#xff0c;它们使您和最终用户能够添加或删除数据行。您将首选学习如何启用内置的数据导航器&#xff0c;然后学习如何使用Microsoft Outlook启发的New Item行添加新记录。最后教程将向您展示基本的API&#xff0c;它…
阅读更多...
全景可视化特点+可视化功能实现

全景可视化特点+可视化功能实现

全景可视化介绍 全景可视化是一种利用现代计算机技术、图像处理技术和虚拟现实技术&#xff0c;将现实世界中的场景以360度全景的方式呈现在用户面前的技术。它不仅能够提供水平方向360度的全景视野&#xff0c;还能通过垂直方向的视角变化&#xff0c;实现上下视角的调节&…
阅读更多...
MVC core 、MVC framework addTagHelper、htmlhelper 、Environment

MVC core 、MVC framework addTagHelper、htmlhelper 、Environment

mvc core 标签助手 TagHelper 只有core 支持 htmlhelper mvc、mvc core 都支持 Environment <environment include"Development">*开发环境,使用不压缩的文件&#xff0c;排除压缩的文件*<link rel"stylesheet" asp-href-include"css/*"…
阅读更多...
Linux相关概念和重要知识点（8）（操作系统、进程的概念）

Linux相关概念和重要知识点（8）（操作系统、进程的概念）

1.操作系统&#xff08;OS&#xff09; &#xff08;1&#xff09;基本结构的认识 任何计算机系统都包含一个基本的程序集合&#xff0c;用于实现计算机最基本最底层的操作&#xff0c;这个软件称为操作系统。操作系统大部分使用C语言编写&#xff0c;少量使用汇编语言。 从…
阅读更多...
[极客大挑战 2019]RCE ME1

[极客大挑战 2019]RCE ME1

<?php error_reporting(0); if(isset($_GET[code])){$code$_GET[code];if(strlen($code)>40){die("This is too Long.");}if(preg_match("/[A-Za-z0-9]/",$code)){die("NO.");}eval($code); } else{highlight_file(__FILE__); }// ?>…
阅读更多...
【React】组件通信

【React】组件通信

1. 组件通信 组件间的数据传递 1.1 父传子 步骤&#xff1a; 父组件传递数据——在子组件标签上绑定属性子组件接收数据——子组件通过props参数接收数据 function Son(props) {return <div>{props.value}</div> }function App() {const value 父组件传给子…
阅读更多...
实验二十：ds1302时钟实验

实验二十：ds1302时钟实验

数码管硬件如以前实验所示‘ 完整代码如下 ds1302驱动 C文件 #include "ds1302.h" #include "intrins.h"u8 gWRITE_RTC_ADDR[7]={0x80,0x82,0x84,0x86,0x88,0x8a,0x8c};//秒，分，时，日，月，周，年 u8 gREAD_RTC_ADDR[7]={0x81,0x83,0x85,0x87,0x89,…
阅读更多...
Vue3 + TS 实现同一项目同一链接，pc端打开是web应用，手机打开是H5应用

Vue3 + TS 实现同一项目同一链接，pc端打开是web应用，手机打开是H5应用

前言&#xff1a; 我自己搭建的项目基本都是用 postcss-px-to-viewport 插件进行适配的&#xff1b; 最近在做一个项目&#xff0c;需求是同样的功能&#xff0c;用户可以在电脑上打开操作使用&#xff0c;也可以在手机上登录进去操作使用&#xff0c;但是跳转链接是同一个&am…
阅读更多...
前端工程化之vite

前端工程化之vite

vite常用的插件有哪些? vitejs/plugin-vue&#xff1a;用于支持 Vue.js 单文件组件&#xff08;.vue 文件&#xff09; vitejs/plugin-react&#xff1a;用于支持 React 和 JSX 语法 rollup-plugin-visualizer: 用于打包分析 vite-plugin-restart: 文件修改时自动重启vite …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023