位置: IT常识 - 正文

vue中组件间通信的6种方式(vue之间的组件通信)

编辑:rootadmin
vue中组件间通信的6种方式 前言

推荐整理分享vue中组件间通信的6种方式(vue之间的组件通信),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue组件之间通信,vue中组件之间如何通信,vue组件之间通信,vue组件间通信有哪几种,vue中的组件通信,vue组件间通信子传父的应用场景,vue中组件之间如何进行数据通信,vue组件间通信子传父的应用场景,内容如对您有帮助,希望把文章链接给更多的朋友!

组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的。

除了使用vuex外还有下面6种组件间的通信方式:1、 props / $emit

父组件通过 props 向子组件传递数据,子组件通过 $emit 和父组件通信

(1)父组件向子组件传值(props的用法)

props的特点:

props只能是父组件向子组件进行传值,props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父组件的更新而响应式更新。props可以显示定义一个或一个以上的数据,对于接收的数据,可以是各种数据类型,同样也可以是传递一个函数。props属性名规则:若在props中使用驼峰形式,模板中标签需要使用短横线的形式来书写。

用法:

父组件:

// 父组件<template> <div id="father"> <son :msg="msgData" :fn="myFunction"></son> </div></template><script>import son from "./son.vue";export default { name: father, data() { msgData: "父组件数据"; }, methods: { myFunction() { console.log("vue"); } }, components: { son }};</script>

子组件:

// 子组件<template> <div id="son"> <p>{{msg}}</p> <button @click="fn">按钮</button> </div></template><script>export default { name: "son", props: ["msg", "fn"]};</script>(2)子组件向父组件传递数据($emit的用法)

$emit的特点:

$emit 绑定一个自定义事件,当这个事件被执行的时候就会将参数传递给父组件,而父组件通过v-on监听并接收参数

用法:

父组件:

// 父组件<template> <div class="section"> <com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article> <p>{{currentIndex}}</p> </div></template><script>import comArticle from './test/article.vue'export default { name: 'comArticle', components: { comArticle }, data() { return { currentIndex: -1, articleList: ['红楼梦', '西游记', '三国演义'] } }, methods: { onEmitIndex(idx) { this.currentIndex = idx } }}</script>

子组件:

//子组件<template> <div> <div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div> </div></template><script>export default { props: ['articles'], methods: { emitIndex(index) { this.$emit('onEmitIndex', index) // 触发父组件的方法,并传递参数index } }}</script>2、ref / $refs

这种方式也是实现父子组件之间的通信

ref:这个属性用在子组件上,它的用用就指向了子组件的实例,可以通过实例来访问组件的数据和方法

用法:

在子组件中:

export default { data () { return { name: 'JavaScript' } }, methods: { sayHello () { console.log('hello') } }}

在父组件中:

<template> <child ref="child"></component-a></template><script> import child from './child.vue' export default { components: { child }, mounted () { console.log(this.$refs.child.name); // JavaScript this.$refs.child.sayHello(); // hello } }</script>3、eventBus事件总线($emit / $on)

eventBus事件总线适用于父子组件、非父子组件等之间的通信,使用步骤如下:

(1)创建事件中心管理组件之间的通信// event-bus.jsimport Vue from 'vue'export const EventBus = new Vue()(2)发送事件 假设有两个兄弟组件firstCom和secondCom:

firstCom和secondCom的父组件:

<template> <div> <first-com></first-com> <second-com></second-com> </div></template><script>import firstCom from './firstCom.vue'import secondCom from './secondCom.vue'export default { components: { firstCom, secondCom }}</script>vue中组件间通信的6种方式(vue之间的组件通信)

在firstCom组件中发送事件:

<template> <div> <button @click="add">加法</button> </div></template><script>import {EventBus} from './event-bus.js' // 引入事件中心export default { data(){ return{ num:0 } }, methods:{ add(){ EventBus.$emit('addition', { num:this.num++ }) } }}</script>(3)接收事件

在secondCom组件中接收事件:

<template> <div>求和: {{count}}</div></template><script>import { EventBus } from './event-bus.js'export default { data() { return { count: 0 } }, mounted() { EventBus.$on('addition', param => { this.count = this.count + param.num; }) }}</script>

在上述代码中,这就相当于将num值存贮在了事件总线中,在其他组件中可以直接访问。事件总线就相当于一个桥梁,不用组件通过它来通信。虽然看起来比较简单,但是这种方法也有不变之处,如果项目过大,使用这种方式进行通信,后期维护起来会很困难。

4、依赖注入(provide / inject)

这种方式就是vue中依赖注入,该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子,也可以是祖孙组件,在层数很深的情况下,可以使用这种方式来进行传值。就不用一层一层的传递数据了。

provide和inject是vue提供的两个钩子,和data、methods是同级的。并且provide的书写形式和data一样。

provide 钩子用来发送数据或方法。inject钩子用来接收数据或方法用法:

父组件中:

provide() { return { num: this.num };}

子组件中:

inject: ['num']

还有另一种写法,这种写法可以访问父组件中的所有属性:

provide() { return { app: this };}data() { return { num: 1 };}inject: ['app']console.log(this.app.num)

注意: 依赖注入所提供的属性是非响应式的。

5、$parent / $children使用$parent可以让组件访问父组件的实例(访问的是上一级父组件的属性和方法)。使用 $children 可以让组件访问子组件的实例,但是, $children 并不能保证顺序,并且访问的数据也不是响应式的。用法:

子组件中:

<template> <div> <span>{{message}}</span> <p>获取父组件的值为: {{parentVal}}</p> </div></template><script>export default { data() { return { message: 'Vue' } }, computed:{ parentVal(){ return this.$parent.msg; } }}</script>

父组件中:

<template> <div class="hello_world"> <div>{{msg}}</div> <child></child> <button @click="change">点击改变子组件值</button> </div></template><script>import child from './child.vue'export default { components: { child }, data() { return { msg: 'Welcome' } }, methods: { change() { // 获取到子组件 this.$children[0].message = 'JavaScript' } }}</script>

在上面的代码中,子组件获取到了父组件的parentVal值,父组件改变了子组件中message的值。

注意:

通过 $parent 访问到的是上一级父组件的实例,可以使用 $root 来访问根组件的实例在组件中使用$children拿到的是所有的子组件的实例,它是一个数组,并且是无序的在根组件 #app 上拿 $parent 得到的是 new Vue()的实例,在这实例上再拿 $parent 得到的是undefined,而在最底层的子组件拿 $children 是个空数组$children 的值是数组,而 $parent是个对象6、$attrs / $listeners

考虑一种场景,如果A是B组件的父组件,B是C组件的父组件。如果想要组件A给C组件传递数据,这种隔代传数据的情况该使用哪种方式呢?

如果是用props/ $emit 来一级一级的传递,确实可以完成,但是比较复杂;如果使用事件总线,在多人开发或者项目较大的时候,维护起来很麻烦;如果使用vuex,如果仅仅是传递数据,那可能有点浪费了。

针对上述情况,vue引入了 $attrs / $listeners,实组件之间的跨代通信。

$attrs:继承所有的父组件属性(除了props传递的属性、class 和 style),一般用在子组件的子元素上$listeners:该属性是一个对象,里面包含了作用在这个组件上的所有监听器,可以配合 v-on=" $listeners " 将所有的事件监听器指向这个组件的某个特定的子元素。(相当于子组件继承父组件的事件)

再说一下 inheritAttrs

默认值为true,继承所有的父组件属性除props之外的所有属性。只继承class属性。

$attrs / $listeners的用法: A组件(APP.vue):

<template> <div id="app"> //此处监听了两个事件,可以在B组件或者C组件中直接触发 <child1 :p-child1="child1" :p-child2="child2" @test1="onTest1" @test2="onTest2"></child1> </div></template><script>import Child1 from './Child1.vue';export default { components: { Child1 }, methods: { onTest1() { console.log('test1 running'); }, onTest2() { console.log('test2 running'); } }};</script>

B组件(Child1.vue):

<template> <div class="child-1"> <p>props: {{pChild1}}</p> <p>$attrs: {{$attrs}}</p> <child2 v-bind="$attrs" v-on="$listeners"></child2> </div></template><script>import Child2 from './Child2.vue';export default { props: ['pChild1'], components: { Child2 }, inheritAttrs: false, mounted() { this.$emit('test1'); // 触发APP.vue中的test1方法 }};</script>

C 组件 (Child2.vue):

<template> <div class="child-2"> <p>props: {{pChild2}}</p> <p>$attrs: {{$attrs}}</p> </div></template><script>export default { props: ['pChild2'], inheritAttrs: false, mounted() { this.$emit('test2');// 触发APP.vue中的test2方法 }};</script>

在上述代码中:

C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性在B组件中通过v-bind 绑定$attrs属性,C组件可以直接获取到A组件中传递下来的props(除了B组件中props
本文链接地址:https://www.jiuchutong.com/zhishi/300726.html 转载请保留说明!

上一篇:YOLO V7源码解析(yolov5源码解读)

下一篇:【深度学习】Pytorch实现CIFAR10图像分类任务测试集准确率达95%

  • 抖音直播怎么隐藏让别人看不到(抖音直播怎么隐藏刷礼物金额)

    抖音直播怎么隐藏让别人看不到(抖音直播怎么隐藏刷礼物金额)

  • 苹果xr可以用20w的快充吗(苹果XR可以用电信卡吗)

    苹果xr可以用20w的快充吗(苹果XR可以用电信卡吗)

  • 抖音商城怎么取消显示在主页(抖音商城怎么取消订单)

    抖音商城怎么取消显示在主页(抖音商城怎么取消订单)

  • excel表格怎么查找重复内容(excel表格怎么查找名字)

    excel表格怎么查找重复内容(excel表格怎么查找名字)

  • qq随心贴不见了是对方删了吗(qq随心贴不见了怎么办)

    qq随心贴不见了是对方删了吗(qq随心贴不见了怎么办)

  • 华为手机如何恢复出厂设置(华为手机如何恢复删除的微信聊天记录)

    华为手机如何恢复出厂设置(华为手机如何恢复删除的微信聊天记录)

  • 闲鱼禁言7天怎么解除(闲鱼禁言7天怎么申诉)

    闲鱼禁言7天怎么解除(闲鱼禁言7天怎么申诉)

  • iqooneo3有无线充电吗(iqooneo3有没有无线充电)

    iqooneo3有无线充电吗(iqooneo3有没有无线充电)

  • 手机上面显示volte是什么意思(手机上面显示VoLTE是什么意思)

    手机上面显示volte是什么意思(手机上面显示VoLTE是什么意思)

  • 橙色底纹底纹怎么设置(填充橙色底纹)

    橙色底纹底纹怎么设置(填充橙色底纹)

  • 小米9第几代指纹识别(小米9是什么指纹)

    小米9第几代指纹识别(小米9是什么指纹)

  • 抖音快手属于什么媒体(抖音快手属于什么系)

    抖音快手属于什么媒体(抖音快手属于什么系)

  • 显卡加ti是什么意思(显卡后面加ti)

    显卡加ti是什么意思(显卡后面加ti)

  • 去哪儿网退款多久到自己卡上(去哪儿网退款已办理为何迟迟不到账)

    去哪儿网退款多久到自己卡上(去哪儿网退款已办理为何迟迟不到账)

  • 怎么用虚拟号发短信(怎么用虚拟号发短信给自己)

    怎么用虚拟号发短信(怎么用虚拟号发短信给自己)

  • 怎样移动软件(怎样移动软件到别的盘里?)

    怎样移动软件(怎样移动软件到别的盘里?)

  • 淘宝的问大家怎么弄(淘宝的问大家怎么找)

    淘宝的问大家怎么弄(淘宝的问大家怎么找)

  • word文字竖排调整间距(word的文字竖排)

    word文字竖排调整间距(word的文字竖排)

  • 华为rcs服务能删除吗(华为sc服务器)

    华为rcs服务能删除吗(华为sc服务器)

  • 怎样保存火山不带水印(火山发的视频怎么能不保存到相册)

    怎样保存火山不带水印(火山发的视频怎么能不保存到相册)

  • 华为9系统使用技巧(华为9x10.1系统)

    华为9系统使用技巧(华为9x10.1系统)

  • 苹果手表s3和s4的区别(苹果手表s3和s4哪个性价比高)

    苹果手表s3和s4的区别(苹果手表s3和s4哪个性价比高)

  • s10上市时间(三星手机s10上市时间)

    s10上市时间(三星手机s10上市时间)

  • 苹果手机的照片为什么会模糊    (苹果手机的照片怎么导入u盘)

    苹果手机的照片为什么会模糊   (苹果手机的照片怎么导入u盘)

  • 微信视频怎么关闭自己的摄像头(微信视频怎么关掉自己的摄像头)

    微信视频怎么关闭自己的摄像头(微信视频怎么关掉自己的摄像头)

  • vue实现网页端企业微信扫码登录功能(前端部分)(vue编写网页)

    vue实现网页端企业微信扫码登录功能(前端部分)(vue编写网页)

  • mysql水平分表是什么(mysql水平拆分实现)

    mysql水平分表是什么(mysql水平拆分实现)

  • 关于electron-vue打包后运行白屏的解决方案(electron引入vue)

    关于electron-vue打包后运行白屏的解决方案(electron引入vue)

  • 个人所得税全年一次性奖金优惠政策
  • 企业所得税公益性捐赠扣除标准
  • 施工企业的成本会计对象
  • 公司出售房产缴纳什么税
  • 运费单是什么
  • 期初未交增值税借方余额
  • 非独立核算的分公司企业所得税怎么申报
  • 开专用发票可以不写单位与型号么?
  • 哪些行为违反法律但不违反道德
  • 定期存款要交利息税吗
  • 办公费发票可以认证吗
  • 参加抽奖活动中奖却不发奖品
  • 个人可以做代理吗
  • 商业承兑汇票如何查询
  • mac复制文件路径后怎么粘贴
  • 税负率的计算方法公式
  • 什么是商务接待与拜访
  • 银行的贷款损失准备会计分录
  • linux环境什么意思
  • thinkphp6调用模型的方法
  • centos停止发布
  • mac菜单键怎么设置出来的
  • php中td
  • 马德拉海岛
  • php实现用户登录
  • php格式图片
  • 中国国防科技大学 博士
  • Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
  • 被白雪覆盖的彩虹歌词
  • 印花税具体包括哪几类
  • react router教程
  • 珀斯临近什么洋
  • Cursor!!!GPT-4帮我写代码
  • 毕业设计烦死了
  • Vite4+Pinia2+vue-router4+ElmentPlus搭建Vue3项目(组件、图标等按需引入)[保姆级]
  • wordpress建立数据库错误
  • 所得税季度申报表怎么填
  • 收到合同预付款怎么处理
  • 减值损失和减值损失区别
  • VUE3.0+Antdv+Asp.net WebApi开发学生信息管理系统(二)
  • 子公司减资是利好还是利空
  • 小微企业季度申报所得税税率
  • 投资款不打入公司账户可以吗
  • 什么是,利息
  • 合并报表长投和股本抵消后资产负债表怎么处理
  • 家庭保洁服务包括什么
  • 全资子公司注销的账务处理
  • 公司财务报表中不设其他综合收益项目可以吗
  • 确认销售收入时不影响应收账款入账金额的是
  • 已经发出的商品替换零部件进成本还是费用
  • 去年所得税汇算清缴报表填错了今年可以改吗
  • 单位定期存单利息如何记账
  • 投资性房地产折旧和摊销的区别
  • 提取银行存款利息分录
  • 如何理解其他应收款的概念
  • 供应商销售折让怎么入账
  • 开票销售方
  • 算账的意思是什么?
  • friend怎么用
  • Windows任务栏中的活动程序间不能切换对吗
  • windows7壁纸怎么恢复
  • centos7.1
  • mac识别文字软件
  • 苹果电脑bim
  • win7系统运行在哪
  • 如何修改win7电脑用户密码
  • Android中SurfaceView的使用详解
  • 使用jquery实现的项目
  • perl -p -i
  • css@import
  • unity安装进度条不动
  • Javascript removeChild()删除节点及删除子节点的方法
  • 大征期和小征期的区别
  • 应交税费应交增值税已交税金是什么意思
  • 车船税保单哪里打印
  • 如何打印个税缴纳记录
  • 新三步走和旧三步走的异同点
  • 医保未参保怎么参保 支付宝
  • 年度汇算清缴计算
  • 广州代理记账公司地址
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设