当前位置： 首页 > news >正文

Day7、Vue3 组件通信技术

news 来源：原创 2025/6/17 20:51:15

「本专栏是我在学习 Vue3 过程中的总结与分享，旨在帮助初学者快速上手 Vue3。由于我也在持续学习中，如果有任何疏漏或错误，欢迎大家在评论区指正，我们一起进步！」
提示：使用该文档学习vue3需要有一些vue和vue2的基础才可以更好的学习噢~~
版权：未经允许，禁止转载！
鼓励：每一次自我怀疑，都是成长的信号，它在提醒你正站在突破的边缘。大胆向前，你的能力远超想象，自信会为你推开成功之门。
————————————————

文章目录

  • 前言
    • 一、props的子父级间的通信
    • 二、自定义组件
    • 三、mitt（跨组件通信）
      • 3.1 安装mitt
      • 3.2 配置mitt文件
      • 3.3 测试功能
    • 四、v-model实现组件通信
    • 五、attrs语法
    • 六、refs语法
    • 七、$parent语法
  • 总结

前言

提示：本章是vue3组件间联系的语法学习，也是相当重要的内容，大家加把劲，就快要学完了！

在Vue3开发中，组件通信是构建复杂应用的核心之一。无论是父子组件间的数据传递，还是跨层级组件的状态共享，掌握高效的通信方式都能让代码更清晰、维护更轻松。Vue3提供了多种通信方式，如props、emit、provide/inject、v-model以及attrs等，每种方式都有其适用场景。本文将带你全面了解这些方法，帮助你在实际开发中灵活运用。

一、props的子父级间的通信

  • 作用：父组件通过 props 向子组件传递数据。
  • 优势：
    • 简单易用，适合父子组件之间的单向数据流。
    • 支持类型检查和默认值，增强代码健壮性。
    • 数据流清晰，便于维护。

示例代码：

Father.vue

<template>
  <div class="father">
    <h3>父组件</h3>
		<h4>汽车：{{car}}</h4>
		<h4 v-if="toy">子给的玩具：{{toy}}</h4>
		<!-- 父传子 不需要写函数 -->
		 <!-- 子传父 需要写一个函数 -->
		<Child :car = 'car' :sendToy = 'getToy' ></Child>
  </div>
</template>

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

<style scoped>
	.father{
		background-color:rgb(165, 164, 164);
		padding: 20px;
		border-radius: 10px;
	}
</style>

Child.vue

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

<script setup lang="ts" name="Child">
import { ref } from 'vue';

	//数据
	let toy = ref('奥特曼')
	// 用props接收父级传来的数据
defineProps(['car','sendToy'])
</script>

<style scoped>
	.child{
		background-color: skyblue;
		padding: 10px;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
	}
</style>

二、自定义组件

  • 作用：子组件通过 $emit 触发自定义事件，父组件监听并处理。
  • 优势：
    • 实现子组件向父组件传递数据或触发行为。
    • 事件驱动，灵活性强。
    • 适合子组件需要通知父组件的场景。

示例代码：

Father.vue

<template>
  <div class="father">
    <h3>父组件</h3>
		<h4 v-show="toy">子级给的数据：{{toy}}</h4>
		<!-- 通过自定义组件将子级的数据传递给父级 -->
		 <!-- 一般使用‘-’ 而不是驼峰命名 -->
		<Child @send-toy="getToy"></Child>
  </div>
</template>

<script setup lang="ts" name="Father">
import { ref } from 'vue';
import Child from './Child.vue'

const toy = ref('')
function getToy(value:string){
	toy.value = value
}
</script>

<style scoped>
	.father{
		background-color:rgb(165, 164, 164);
		padding: 20px;
		border-radius: 10px;
	}
</style>

Child.vue

<template>
  <div class="child">
    <h3>子组件</h3>
		<button @click="$emit('send-toy',toy)">点我将数据送给父级</button>
  </div>
</template>

<script setup lang="ts" name="Child">
import { ref } from 'vue';
const toy = ref('奥特曼')
// 需要使用数组的形式才可以
let emit = defineEmits(['send-toy'])
</script>
<style scoped>
	.child{
		background-color: skyblue;
		padding: 10px;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
	}
</style>

三、mitt（跨组件通信）

  • 作用：一个轻量级的事件总线库，用于任意组件间的通信。
  • 优势：
    • 不依赖组件层级关系，适合跨组件通信。
    • 简单易用，解耦性强。
    • 适合小型项目或不需要状态管理的场景。

3.1 安装mitt

npm i mitt

新建文件：src\utils\emitters.ts

3.2 配置mitt文件

emitters.ts

//  引入
import mitt from "mitt";
//  调用
//  emitter 可以绑定/触发事件
const emitter = mitt()

/* 
// 绑定事件
emitter.on('test1', () => {
  console.log('test1');
})
// 触发事件
emitter.emit('test1')
// 解绑事件
emitter.off('test1')
// 全部解绑
emitter.all.clear() 
*/

// 暴露
export default emitter

3.3 测试功能

实例代码：

Child.vue

<template>
  <div class="child">
    <h3>子组件</h3>
    <h4 v-show="toy">叔叔给孩子的玩具：{{toy}}</h4>
  </div>
</template>

<script setup lang="ts" name="Child">
import emitter from '@/utils/emitters';
import { onUnmounted, ref } from 'vue';
const toy = ref('')
emitter.on('send-toy',(value:any) => {
	toy.value = value
})
// 绑定之后在销毁之后必须把事件解绑了噢！！！
onUnmounted(()=>{
	emitter.off('send-toy')
})
</script>

<style scoped>
	.child{
		background-color: skyblue;
		padding: 10px;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
	}
</style>

Uncle.vue

<template>
  <div class="uncle">
    <h3>叔组件</h3>
    <button @click="sendToy">点击送给孩子玩具</button>
  </div>
</template>

<script setup lang="ts" name="Child">
import emitter from '@/utils/emitters';
import { ref } from 'vue';
// 叔叔用emit方法给孩子送玩具
let toy = ref('娃娃')
function sendToy(){
  emitter.emit('send-toy',toy.value)
}
</script>

<style scoped>
	.uncle{
		background-color: orange;
		padding: 10px;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
	}
</style>

Father.vue

<template>
  <div class="father">
    <h3>父组件</h3>
		<Child></Child>
		<br>
		<Uncle></Uncle>
  </div>
</template>

<script setup lang="ts" name="Father">
import { ref } from 'vue';
import Child from './Child.vue'
import Uncle from './Uncle.vue';
</script>

<style scoped>
	.father{
		background-color:rgb(165, 164, 164);
		padding: 20px;
		border-radius: 10px;
	}
</style>

四、v-model实现组件通信

  • 作用：实现父子组件之间的双向数据绑定。
  • 优势：
    • 简化父子组件间的双向数据同步。
    • 语法简洁，易于理解。
    • 适合表单控件等需要双向绑定的场景。

示例代码：

Child.vue

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

<script setup lang="ts" name="Child">
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<style scoped>
	input{
		background-color: skyblue;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
	}
</style>

Father.vue

<template>
  <div class="father">
    <h3>父组件</h3>
		<!-- <input type="text" v-model="username"> -->
		 <!-- v-model底层原理 -->
		 <!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value" > -->
 
			<!-- v-model 用在组件上 -->
			 <!-- :modelValue  @update:modelValue  -->
			 <!-- <Child :modelValue="username" @update:modelValue="username = $event"></Child> -->
				<Child v-model="username"></Child>
			 
 </div>
</template>

<script setup lang="ts" name="Father">
import { ref } from 'vue';
import Child from './Child.vue'
let username = ref('zhangsan')
</script>

<style scoped>
	.father{
		background-color:rgb(165, 164, 164);
		padding: 20px;
		border-radius: 10px;
	}
</style>

注意 v-model:ming=“passwad” 这样取的props就不用写modelValue，而是ming 并且修改名字 一个组件上可以绑定多个v-model

五、attrs语法

  • 作用：父组件传递的未在子组件 props 中声明的属性，可以通过 $attrs 访问。
  • 优势：
    • 方便传递额外的属性或事件。
    • 减少重复代码，提高组件灵活性。
    • 适合高阶组件或封装通用组件时使用。

示例代码：

Father.vue

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

<script setup lang="ts" name="Father">
import { ref } from 'vue';
import Child from './Child.vue'

function updateA(value:number){
	a.value += value
}

let a = ref(1)
let b = ref(2)
let c = ref(3)
let d = ref(4)
</script>

<style scoped>
	.father{
		background-color:rgb(165, 164, 164);
		padding: 20px;
		border-radius: 10px;
	}
</style>

Child.vue

<template>
  <div class="child">
		<h3>子组件</h3>
		<!-- 用 $attrs来接收父组件给的数据和方法通过该中介传递给孙级 -->
		<Grand v-bind="$attrs"></Grand>
  </div>
</template>

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

<style scoped>
	.child{
		background-color: skyblue;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
		padding: 15px;
	}
</style>

Grand.vue

<template>
  <div class="grand">
		<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(6)">点我更改爷爷的A</button>
  </div>
</template>

<script setup lang="ts" name="grand">
// $attrs实现了defineProps从爷爷到孙子的写法
defineProps(['a','b','c','d','x','y','updateA'])
</script>

<style scoped>
	.grand{
		background-color: orange;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
	}
</style>

六、refs语法

  • 作用：父组件通过 $refs 直接访问子组件的实例或 DOM 元素。
  • 优势：
    • 可以直接调用子组件的方法或访问其数据。
    • 适合需要直接操作子组件的场景。
    • 注意：过度使用可能导致代码耦合性增加。

示例代码：

Father.vue

<template>
  <div class="father">
    <h3>父组件</h3>
		<h4>父亲有：{{money}}元</h4>
		<!-- 	 这个位置的参数必须是$refs -->
			 <!-- $refs就是所有含有ref组件的实例化对象 因此是一个对象数组 -->
		<button @click="addBook($refs)">给孩子添加书本</button>
		<Child ref="c1"></Child> 
		<Daughter ref="d1"></Daughter>

 </div>
</template>

<script setup lang="ts" name="Father">
import { ref } from 'vue';
import Child from './Child.vue'
import Daughter from './Daughter.vue';

let money = ref(1000)
let c1 = ref()
let d1 = ref()

// 为儿女的书本每次增加3本
function addBook(refs: any){
	for (const key in refs) {
			refs[key].book += 3		
	}
}
</script>

<style scoped>
	.father{
		background-color:rgb(165, 164, 164);
		padding: 20px;
		border-radius: 10px;
	}
</style>

Child.vue

<template>
  <div class="child">
		<h3>儿子组件</h3>
		<h4>儿子有：{{book}}本书</h4>
  </div>
</template>

<script setup lang="ts" name="Child">
import { ref } from 'vue';

let book = ref(3)
defineExpose({book})
</script>

<style scoped>
	.child{
		background-color: skyblue;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
		padding: 15px;
	}
</style>

Daughter.vue

<template>
  <div class="child">
		<h3>女儿组件</h3>
    <h4>女儿有：{{book}}本书</h4>
  </div>
</template>

<script setup lang="ts" name="Child">
import { ref } from 'vue';

let book = ref(3)
defineExpose({book})
</script>

<style scoped>
	.child{
		background-color: orange;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
		padding: 15px;
	}
</style>

七、$parent语法

  • 作用：子组件通过 $parent 直接访问父组件的实例。
  • 优势：
    • 可以直接调用父组件的方法或访问其数据。
    • 适合简单场景下的父子组件交互。
    • 注意：过度使用可能导致组件耦合性增加，不利于维护。

示例代码：

Father.vue

<template>
  <div class="father">
    <h3>父组件</h3>
		<h4>父亲有：{{money}}元</h4>
		<Child ref="c1"></Child> 
 </div>
</template>

<script setup lang="ts" name="Father">
import { ref } from 'vue';
import Child from './Child.vue'

let money = ref(1000)
let c1 = ref()
defineExpose({money})
</script>

<style scoped>
	.father{
		background-color:rgb(165, 164, 164);
		padding: 20px;
		border-radius: 10px;
	}
</style>

Child.vue

<template>
  <div class="child">
		<h3>儿子组件</h3>
		<h4>儿子有：{{book}}本书</h4>
		<button @click="expendMoney($parent)">花父亲20块钱</button>
  </div>
</template>

<script setup lang="ts" name="Child">
import { ref } from 'vue';

let book = ref(3)

// 儿子花父亲的钱
function expendMoney(parent: any){
	parent.money -= 20
}
</script>

<style scoped>
	.child{
		background-color: skyblue;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
		padding: 15px;
	}
</style>

总结

  • props 和 emit：适合父子组件之间的单向或简单双向通信。
  • mitt：适合跨组件通信，解耦性强。
  • v-model：适合需要双向绑定的场景。
  • $attrs：适合透传属性或事件。
  • $refs 和 $parent：适合直接操作组件实例，但需谨慎使用，避免过度耦合。

根据具体场景选择合适的通信方式，可以让代码更清晰、更易维护！

相关文章：

  • Vue3父组件访问子组件方法与属性完全指南
  • JBoltAI_SpringBoot 资源管理：打造一站式 AI 资源管理平台
  • LinuxNvidia显卡驱动, cuda工具包，驱动包版本记录
  • java spring cloud 工程企业管理软件-综合型项目管理软件-工程系统源码
  • 《深度学习实战》第4集：Transformer 架构与自然语言处理（NLP）
  • Mybatis是如何进行分页的？与Mybatis-plus的区别在哪里？
  • AWS API Gateway灰度验证实现
  • 对于邮箱地址而言，短中划线（Hyphen, -）和长中划线（Em dash, —）有区别吗
  • 计算机毕业设计SpringBoot+Vue.js房屋租赁管理系统(源码+文档+PPT+讲解)
  • LSTM长短期记忆网络-原理分析
  • uniapp中使用leaferui使用Canvas绘制复杂异形表格的实现方法
  • 【工具】前端 js 判断当前日期是否在当前自然周内
  • 如何更改vim命令创建代码文件时的默认模板
  • 【Go】十七、grpc 服务的具体功能编写
  • 核弹级技术革命——搭配deepseek-r1满血版的腾讯云ai助手（codex）仅用14天独立开发出适配ARM架构的微内核操作系统！
  • python 学习笔记
  • 《 C++ 点滴漫谈： 二十七 》告别低效！C++ 输入输出操作你真的会用吗？
  • Apache Tomcat RCE 稳定复现 保姆级！(CVE-2024-50379)附视频+POC
  • Git：多人协作
  • 什么是 Netty
  • 小程序有什么用/深圳防疫措施优化
  • 政府网站建设分类/百度爱采购推广怎么收费
  • 推广公众号/河北网站seo策划
  • 织梦大气绿色大气农业能源化工机械产品企业网站源码模版/百度提交工具
  • 外贸开源网站/沈阳网站制作优化推广
  • 做旅游去哪个网站找图/行业关键词查询