位置: 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身份指令

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

  • 企业办理纳税手续需要带什么材料
  • 有限责任公司相关规定
  • 个税完税凭证在哪里打印出来
  • 跨月收入账务处理
  • 个人交的社保发票怎么开
  • 偶然所得个税怎么计算公式
  • 为取得固定资产而发生的什么支出可计入固定资产成本
  • 进口代理费取费标准
  • 暂估的成本跨年了怎么冲销后要调整报表吗
  • 兼职劳务费如何入账
  • 农产品收购发票上的买价含税吗
  • 金融企业贷款损失准备金
  • 工业总产值计算方式计算公式
  • 公司销售商品怎么做分录
  • 应付账款周转天数上升的原因
  • 部队医院学校都没有税号吗
  • 哪些人需缴纳个人所得税
  • 工程承包款要交多少税
  • 政府投资农业项目
  • 园林绿化工程公司电话
  • 房地产企业个人所得税
  • 应收账款转让的风险
  • 调制解调器报告了一个错误怎么弄
  • 营改增后房地产企业账务处理
  • 强化税收风险意识
  • ekb install
  • kavsvc.exe - kavsvc是什么进程 有什么作用
  • php详细教程
  • 劳务报酬所得包括哪些
  • 库存股会计处理 会计视野
  • 航天信息开票软件客服
  • vue viewui
  • 牛客前端刷题怎么样
  • php简单获取网站的方法
  • 红字发票账务处理
  • 帝国cms怎么上传图片
  • 建筑保温材料施工规范
  • 金银首饰包装物消费税
  • python3 zipfile模块
  • 织梦cms怎么样
  • phpcms多站点
  • Python支持向量能干什么
  • 非货币性资产交换和债务重组的区别
  • 员工旅游的费用账务处理
  • 售后领料怎么做会计分录
  • 个人所得税可以取出来用吗
  • 期末进行存货清查
  • PostgreSQL管理工具phpPgAdmin入门指南
  • 发票报销哪些要素不能少
  • 资产处置收益项目有哪些
  • 公司个税如何申报流程
  • 一般纳税人认定书是什么样子
  • 所得税怎么收取
  • 长期待摊费用是摊销费用吗
  • 外部审计的构成
  • 关联公司代缴社保劳动者怎么处理
  • 水利基金和印花税的计税依据一样吗
  • 出售固定资产如何缴纳增值税
  • 目标考核奖金做什么科目
  • 准备金支出是否含税
  • 债权投资和其他应收款的区别
  • 商业会计的任务有哪些
  • 企业如何建账做账
  • sql server重新安装步骤
  • windows server能干嘛
  • centos7权限
  • windows 命令行 ftp
  • win10怎么切任务管理
  • Unable to execute dex: Multiple dex files define Lorg/cocos2dx/lib/Cocos2dxAccelerometer
  • ide通道怎么打开
  • linux小技巧
  • jquery插件使用教程
  • 服务端测试是什么意思
  • 跨浏览器插件
  • Android调整按钮位置
  • 国税公告2016年14解读
  • 土地增值税清算条例与实施细则
  • 一年内在两家公司任职个税汇算清缴
  • 徐州市哪些区域封闭了
  • 郑州高新税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设