位置: IT常识 - 正文

vue中利用ref实现更灵活的子向父传值

编辑:rootadmin
vue中利用ref实现更灵活的子向父传值 目录前言一,基础代码二,层次递进的讲解用法2.1 给子组件设置ref2.2 自定义事件2.3 给子组件设置一个自定义事件三,灵活性四,注意后记前言

推荐整理分享vue中利用ref实现更灵活的子向父传值,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

目前我们熟知的子向父传值有两种方式: 一种是在父组件中定义函数,然后将函数利用props传给子组件,子组件调用时父组件可以收到子组件的参数;另一种利用自定义事件,给子组件在父组件中绑定一个自定义事件,子组件利用$emit方式触发该自定义事件时可以将数据传给父亲。

今天介绍的是通过ref的方法实现子组件传值给父组件。这种方式比前两种方式用起来更加灵活。

这里附上涉及到的知识点链接,如有需要可以复习: Vue组件之间的数据共享讲解 Vue中ref引用操作DOM元素 其中,第一篇文章中有涉及到子向父传值的传统方式。

一,基础代码

这里放上我的App(父组件)和Son(子组件)的代码,后续所有的改动在此基础之上: (APP)

<template> <div> <h2>子组件的msg:</h2> <Son></Son> </div></template><script>import Son from './Son.vue'export default { name: 'App', components: { Son }}</script><style></style>

(Son)

<template> <div> <h2>我是子组件</h2> </div></template><script>export default { name: 'Son', data() { return { msg: '巧克力小猫猿' } }}</script><style></style>二,层次递进的讲解用法2.1 给子组件设置ref

这里我们给子组件设置一个ref,并查看父组件中的this.$refs中有什么(在mounted钩子函数中打印): 打印出来的结果是: 可以看到,此时ref对象中已经有了Son,并且类型是vc(组件)。既然在ref对象中那我们可以通过ref去操作它。

2.2 自定义事件vue中利用ref实现更灵活的子向父传值

我们在学传统的子向父传值时,涉及到了自定义事件。本节的方法依旧余自定义事件有联系,所以在正式了解如何用ref实现子向父传值时我们先来复习下自定义事件。

自定义事件的定义:使用vm.$on这个api:

vm.$on('自定义事件名',自定义事件被触发后调用的回调函数)

如:

vm.$on( 'aa', function () { console.log( 'aa' ) })

自定义事件的触发:使用vm.$emit这个api:

vm.$emit('自定义事件名',自定义事件需要用到的参数1,参数2,参数n)

一个是定义,一个是触发。我在学习vue视频的时候看到很多人不理解用ref写的这种作法,本质上是对自定义事件的不了解。

2.3 给子组件设置一个自定义事件

在App中为子组件设置一个自定义事件:这里要说的是,==给谁绑定的自定义事件,就去找谁调用。==现在给子组件son绑定了一个自定义事件,那么就要在子组件中去调用它。并且如下图可知,给子组件设置的自定义事件名为qklxmy,一旦触发,则调用回调函数getmsg。 在子组件中触发自定义事件:并且把son中的msg传给了该自定义事件qklxmy。(传的msg用于执行自定义事件的回调函数) 上述过程,给子组件定义了自定义事件,又在子组件中调用。由于子组件中自定义事件的回调写在父组件中,所以父组件可以收到子组件的传值。

三,灵活性

在前面有说,这么写会更加灵活。之所以灵活,是因为我们可以在钩子函数中使用这种方式传值,如:

我们还可以写定时器来设置什么时候接到传值。

四,注意

通过此方式绑定自定义事件,回调要么配置在methos中,就是如上方法,要么就用箭头函数。 如果不用箭头函数,this的指向会出现问题。

后记

以上就是vue中用ref实现灵活的子向父传值的方式,希望能帮助读者朋友更好的理解组件之间的传值以及对ref的理解。欢迎关注。

本文链接地址:https://www.jiuchutong.com/zhishi/300388.html 转载请保留说明!

上一篇:chatGPT身份指令

下一篇:深度学习之快速实现数据集增强的方法

  • 附加税的计算公式2023
  • 如何计提当月的个人所得税?
  • 企业销售折扣折让会计分录
  • 营业执照备案需要什么资料
  • 红字信息表撤销失败B80095
  • 青年企业家协会入会要求
  • 其他应收款贷方余额表示什么
  • 个人购买商铺如何缴税
  • 以应税消费品抵偿债务的计税依据
  • 贸易型出口退税流程
  • 抵扣红冲发票怎么报税
  • 工程技术服务费和技术服务费
  • 小规模纳税人查账征收所得税税率
  • 建筑企业收到的商品怎么入账呢
  • 新公司开业的祝福语
  • 个体工商户是否需要缴纳印花税
  • 公司单位员工餐费怎么算
  • 个人在杂志上发表散文取得的所得
  • 商业承兑到期兑不出来多久的追诉期
  • 增值税的征收范围包括在中华人民共和国境内
  • 什么情况下需要承担法律责任
  • win7安装驱动程序
  • 管理软件对相机的要求
  • qqexternal.exe是什么进程如何删除(CPU的使用率在90%)
  • linux 文件夹压缩
  • PHP:apache_child_terminate()的用法_Apache函数
  • 1.exe是什么文件
  • 原始凭证的分类依据有哪些?分别能分为哪些类型?
  • 布鲁克斯的故事
  • PHP:pcntl_get_last_error()的用法_PCNTL函数
  • 小企业会计准则适用于哪些企业
  • PHP:imagecolordeallocate()的用法_GD库图像处理函数
  • 新事业单位会计准则
  • jar启动指定启动类
  • zendframework3
  • 增值税申报主表在哪里查询
  • SwinIR实战:详细记录SwinIR的训练过程
  • ssh非交互式登录
  • 资本化支出的账务处理
  • 增值税进项和销项怎么抵扣
  • sql2008设置
  • 还款利息
  • 没有开具发票的收入如何入账?
  • 将自产产品用于赠送
  • oracle 删除用户下所有表
  • 多处取得工资薪金
  • 处置资产增值税纳税义务发生时间
  • 交通运输服务包括程租
  • 固定资产计提折旧凭证怎么做
  • 维修材料分类
  • 企业如何进行促销
  • 房租押金是什么意思?
  • 房屋租赁违约金怎么规定
  • 物业安装摄像头的规定
  • 收入可以直接转成本吗?
  • 招标代理服务费应该由谁支付
  • 其他应付款在借方是代表公司欠人家钱吗
  • 福利补贴制度
  • torch.cuda.set_device
  • 怎样开启bios
  • vc运行程序
  • conf文件用什么软件打开
  • win8系统无线网络图标不见了
  • w10开发者模式
  • y400加装固态硬盘教程
  • 怎么处理人际关系
  • ghost参数设置
  • 2014年最火的英文歌
  • jquery层级选择器
  • bash特殊符号
  • js md5加密方法
  • shell脚本检查输入参数
  • android 加载更多
  • jquery 插件写法
  • 江西电子税务局官网app
  • 青岛市地方税务局网上办税厅
  • 威科先行法律信息库价格
  • 怎么在开票系统导出开票明细
  • 马来西亚进口货物的标签要求
  • 申报土地增值税需要什么资料
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设