vue3中的组件通信方式有哪些?

news/2024/12/14 13:12:12/

        在vue3里,组件是一个非常重要的概念,项目中各个组件间的通信也是一个非常常见的需求,接下来我将为大家展示vue3组件有哪几种常见的通信方式。

一、props

适用场景:父子组件之间的通信

父传子:

        父组件在子组件的标签中通过写属性名加属性值的方式,可以直接将数据传递给子组件(要想数据是响应式,必须使用通过v-bind,或其简写形式)

<template><div class="father"><h3>父组件</h3><h4>汽车:{{ car }}</h4><Child :car="car" /></div>
</template><script setup lang="ts" name="Father">
// @ts-ignoreimport Child from './Child.vue'import {ref} from 'vue'// 数据let car = ref('奔驰')
</script><style scoped>.father{background-color:rgb(165, 164, 164);padding: 20px;border-radius: 10px;}
</style>

   子组件需要通过defineProps接收参数 

<template><div class="child"><h3>子组件</h3><h4>玩具:{{ toy }}</h4><h4>父组件的车:{{ car }}</h4></div>
</template><script setup lang="ts" name="Child">import {ref} from 'vue'// 数据let toy = ref('奥特曼')// 声明接收propsdefineProps(['car'])
</script><style scoped>.child{background-color: skyblue;padding: 10px;box-shadow: 0 0 10px black;border-radius: 10px;}
</style>

效果:

 

子传父:

        需要父组件先传递一个函数给子组件,子组件调用函数并传递参数

        父组件传递了一个叫做sendToy的数据,其中的值是父组件的getToy函数

<template><div class="father"><h3>父组件</h3><h4>汽车:{{ car }}</h4><h4 v-show="toy">子给的玩具:{{ toy }}</h4><Child :car="car" :sendToy="getToy"/></div>
</template><script setup lang="ts" name="Father">
// @ts-ignoreimport Child from './Child.vue'import {ref} from '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>

             子组件接收了sendToy数据,并在调用了函数时传递了参数

<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('奥特曼')// 声明接收propsdefineProps(['car','sendToy'])
</script><style scoped>.child{background-color: skyblue;padding: 10px;box-shadow: 0 0 10px black;border-radius: 10px;}
</style>

效果:

        点击按钮,子组件将会传递toy给父组件,父组件并会显示出文字 

二、自定义事件 

适用场景:子组件向父组件传递数据

示例:

        父组件需要给子组件绑定自定义事件,并指定事件触发时将要执行的回调函数,send-toy 为子组件Child的事件名 ,saveToy为事件触发时的回调函数,参数为子组件传递的值

<template><div class="father"><h3>父组件</h3><h4 v-show="toy">子给的玩具:{{ toy }}</h4><!-- 给子组件Child绑定事件 --><!-- send-toy 为子组件Child的事件名 ,saveToy为事件触发时的回调函数,参数为子组件传递的值 --><Child @send-toy="saveToy"/></div>
</template><script setup lang="ts" name="Father">
// @ts-ignoreimport Child from './Child.vue'import { ref } from "vue";// 数据let toy = ref('')// 用于保存传递过来的玩具function saveToy(value:string){console.log('saveToy',value)toy.value = value}
</script><style scoped>.father{background-color:rgb(165, 164, 164);padding: 20px;border-radius: 10px;}.father button{margin-right: 5px;}
</style>

         子组件需要声明事件,并选择在合适的时机通过emit触发事件

<template><div class="child"><h3>子组件</h3><h4>玩具:{{ toy }}</h4><button @click="emit('send-toy',toy)">测试</button></div>
</template><script setup lang="ts" name="Child">import { ref } from "vue";// 数据let toy = ref('奥特曼')// 声明事件const emit =  defineEmits(['send-toy'])
</script><style scoped>.child{margin-top: 10px;background-color: rgb(76, 209, 76);padding: 10px;box-shadow: 0 0 10px black;border-radius: 10px;}
</style>

效果: 

点击按钮将触发自定义事件,父组件接收到子组件传递的数据 

三、mitt

        适用场景:可以实现任意组件之间的通信

需要提前安装好mitt,并配置好mitt

emiter.ts:

javascript">// 引入mitt
import mitt from 'mitt'// 调用mitt得到emitter,emitter能:绑定事件、触发事件
const emitter = mitt()// 暴露emitter
export default emitter

兄弟组件:

<template><div class="child1"><h3>子组件1</h3><h4>玩具:{{ toy }}</h4><button @click="emitter.emit('send-toy',toy)">玩具给弟弟</button></div>
</template><script setup lang="ts" name="Child1">import {ref} from 'vue'// @ts-ignoreimport emitter from '@/utils/emitter';// 数据let toy = ref('奥特曼')
</script><style scoped>.child1{margin-top: 50px;background-color: skyblue;padding: 10px;box-shadow: 0 0 10px black;border-radius: 10px;}.child1 button{margin-right: 10px;}
</style>
<template><div class="child2"><h3>子组件2</h3><h4>电脑:{{ computer }}</h4><h4>哥哥给的玩具:{{ toy }}</h4></div>
</template><script setup lang="ts" name="Child2">import {ref,onUnmounted} from 'vue'// @ts-ignoreimport emitter from '@/utils/emitter';// 数据let computer = ref('联想')let toy = ref('')// 给emitter绑定send-toy事件emitter.on('send-toy',(value:any)=>{toy.value = value})// 在组件卸载时解绑send-toy事件onUnmounted(()=>{emitter.off('send-toy')})
</script><style scoped>.child2{margin-top: 50px;background-color: orange;padding: 10px;box-shadow: 0 0 10px black;border-radius: 10px;}
</style>

 emitter使用on来绑定事件、emit来触发事件、off来解绑事件、clear清空绑定的所有事件

效果:

点击之后将传递数据给兄弟组件,并在兄弟组件中显示数据


http://www.ppmy.cn/news/1546780.html

相关文章

HarmonyOS入门简介

&#x1f341; 作者&#xff1a;知识浅谈&#xff0c;CSDN签约讲师&博客专家&#xff0c;华为云云享专家&#xff0c;阿里云专家博主&#xff0c;InfoQ签约作者 &#x1f4cc; 擅长领域&#xff1a;全栈工程师、爬虫、ACM算法&#xff0c;大数据&#xff0c;深度学习 &…

软考系统架构设计师论文:论边缘计算及其应用

试题一 论边缘计算及其应用 边缘计算是在靠近物或数据源头的网络边缘侧,融合网络、计算、存储、应用核心能力的 分布式开放平台(架构),就近提供边缘智能服务。边缘计算与云计算各有所长,云计算擅长全局性、非实时、长周期的大数据处理与分析,能够在长周期维护、业务决策…

sudo docker ps才能查看,docker ps不能查看问题

出现 permission denied while trying to connect to the Docker daemon socket 的错误&#xff0c;通常是因为当前用户没有权限访问 Docker 的 Unix 套接字 /var/run/docker.sock。在 Linux 系统中&#xff0c;这个套接字默认只能由 root 用户或 docker 组的成员访问。 要解决…

深入了解区块链:Web3的基础架构与发展

区块链技术是Web3生态系统的核心&#xff0c;它正推动互联网走向去中心化。Web3不仅代表着技术的创新&#xff0c;也挑战着现有互联网结构和用户数据的控制方式。区块链作为Web3的基础&#xff0c;正逐步改变我们对网络交互和数据管理的认知。本文将介绍区块链的基本原理及其在…

半导体企业如何利用 Jira 应对复杂商业变局?

以下是一篇关于如何利用 Jira 构建半导体企业数字化研发管理蓝图的文章。借鉴了 ONES 案例中的思路&#xff0c;并结合了 Jira 的特点&#xff0c;为半导体企业在复杂商业环境下进行数字化转型提供支持&#xff1a; 半导体企业如何利用 Jira 应对复杂商业变局&#xff1f; 在全…

【小程序】封装网络请求request模块

一、封装request请求 因为我把所有项目中的接口也封装到了一个文件中&#xff0c;所以我建了一个services的文件夹&#xff0c;在下面建了一个request.js 在这个里面做了请求拦截器和响应拦截器&#xff0c; const apiConfig require(../config/baseUrl.js);class httpClie…

Qt 窗口可见性 之 close函数和hide函数

close函数 基本功能 close() 方法的主要功能是关闭窗口&#xff0c;并触发一系列与关闭相关的事件和信号。调用此方法后&#xff0c;窗口将不再可见&#xff0c;但窗口对象本身仍然存在&#xff0c;并且可以被再次显示&#xff08;通过调用 show() 方法&#xff09;。 事件处…

石油安全理论知识题库 考试宝在线刷题

一、单选题&#xff08;每题有4个选项&#xff0c;其中只有1个是正确的&#xff0c;将正确的选项号填入括号内&#xff09; 1.新修订的《中华人民共和国安全生产法》于&#xff08; &#xff09;正式实施。 A、2014年1月1日 B、2014年12月1日 C、2015年1月1日 D、2015年…