位置: IT常识 - 正文

vue 父组件调用子组件方法ref(vue 父组件调用子组件效果)

编辑:rootadmin
vue 父组件调用子组件方法ref 一、ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上

推荐整理分享vue 父组件调用子组件方法ref(vue 父组件调用子组件效果),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue父组件调用子组件里面的方法,vue 父组件调用子组件效果,vue父组件调用子组件里面的方法,vue父组件调用子组件的方法并传参,vue父组件调用子组件的方法并传参,vue父组件调用子组件里面的方法,vue父组件调用子组件的方法并传参,vue父组件调用子组件的方法并传参,内容如对您有帮助,希望把文章链接给更多的朋友!

vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用。

父组件:

<template> <div @click="fatherMethod"> <orderchild ref="child"></orderchild> </div></template><script> import orderchild from '~/components/orderchild.vue'; export default { components: { orderchild }, methods: { fatherMethod() {this.$refs.child.childMethods(); } } };</script>

 子组件:

<template> <div>{{name}}</div></template><script> export default { data() { return { name: '测试' }; }, methods: { childMethods() { console.log(this.name); } } };</script>

在父组件中, this.$refs.child 返回的是一个vue实例,可以直接调用这个实例的方法

二、在vue2.0和vue3.0中,ref方法有一些变化:

vue2.0 父组件

vue 父组件调用子组件方法ref(vue 父组件调用子组件效果)

<Table ref="eleTable" @handle="handleFun"></Table>

methods: 

this.$refs.eleTable.子组件的方法名+()

this.$refs.eleTable.子组件的属性名

vue3.0 父组件

  <Table ref="eleTable" @handle="handleFun"></Table>

import {  ref  } from 'vue'

setup() {     //ref方法     const eleTable = ref()  //eleTable是页面ref后面对应的名字     const clickSon = () => {       eleTable.value.changeShowText() //调用子组件的方法       let arr = eleTable.value.tableData //获取子组件 setup 里面定义的变量     } }

参考:vue3.0中使用ref来调用子组件的方法_普通网友的博客-CSDN博客_ref调用子组件方法 

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

上一篇:Web过滤器:Filter(web过滤器的常见应用)

下一篇:Pytorch训练模型损失Loss为Nan或者无穷大(INF)原因(pytorch训练模型计算f1)

  • 国产电影排行榜必看经典排行

    国产电影排行榜必看经典排行

  • oppo手机隐藏便签怎么找到(oppo手机隐藏便签信息怎么找到)

    oppo手机隐藏便签怎么找到(oppo手机隐藏便签信息怎么找到)

  • 支付宝共同账户怎么开(夫妻支付宝共同账户)

    支付宝共同账户怎么开(夫妻支付宝共同账户)

  • 荣耀30pro可以用AR地图吗(荣耀30pro可以用120w快充吗)

    荣耀30pro可以用AR地图吗(荣耀30pro可以用120w快充吗)

  • 华为p30手机可以用5g网络吗(华为P30手机可以扩容手机内存吗)

    华为p30手机可以用5g网络吗(华为P30手机可以扩容手机内存吗)

  • 华为荣耀10青春版系统是多少(华为荣耀10青春版屏幕多大)

    华为荣耀10青春版系统是多少(华为荣耀10青春版屏幕多大)

  • 纯净acg音效什么意思(acg音乐音质)

    纯净acg音效什么意思(acg音乐音质)

  • 苹果11输入法下面的空白怎么取消(苹果11输入法下面的地球怎么去掉)

    苹果11输入法下面的空白怎么取消(苹果11输入法下面的地球怎么去掉)

  • 显示器显示nosignal是什么(显示器显示nosignal)

    显示器显示nosignal是什么(显示器显示nosignal)

  • 美图秀秀怎么把碎发p掉(美图秀秀怎么把背景图换成白色)

    美图秀秀怎么把碎发p掉(美图秀秀怎么把背景图换成白色)

  • g2030cpu相当于i几代(g2030cpu性能如何)

    g2030cpu相当于i几代(g2030cpu性能如何)

  • 网络适配器驱动不见了(网络适配器驱动程序出现问题怎么办)

    网络适配器驱动不见了(网络适配器驱动程序出现问题怎么办)

  • 苹果手机圈圈哪里设置(苹果手机那个圈圈)

    苹果手机圈圈哪里设置(苹果手机那个圈圈)

  • 手机为什么会出现很多照片(手机为什么会出现安全模式)

    手机为什么会出现很多照片(手机为什么会出现安全模式)

  • 11支持双卡吗(iphone14pro支持双卡吗)

    11支持双卡吗(iphone14pro支持双卡吗)

  • 苹果手机怎么限制热点(苹果手机怎么限制热点使用人数)

    苹果手机怎么限制热点(苹果手机怎么限制热点使用人数)

  • word里怎么画线(word手动绘图笔在哪里)

    word里怎么画线(word手动绘图笔在哪里)

  • vivoz5是玻璃后盖吗(vivoz5玻璃后盖怎么拆)

    vivoz5是玻璃后盖吗(vivoz5玻璃后盖怎么拆)

  • 图片分辨率怎么看(图片分辨率怎么改为1920*1080)

    图片分辨率怎么看(图片分辨率怎么改为1920*1080)

  • 用户可设置的文件属性有哪些(用户可设置的文件的属性不包含下列哪一项)

    用户可设置的文件属性有哪些(用户可设置的文件的属性不包含下列哪一项)

  • 微信的花呗在哪里(微信的花呗在哪里找到)

    微信的花呗在哪里(微信的花呗在哪里找到)

  • 抖音被拉黑了还能艾特吗(抖音被拉黑了还能艾特对方看视频吗)

    抖音被拉黑了还能艾特吗(抖音被拉黑了还能艾特对方看视频吗)

  • word怎么把表格放在一页(word怎么把表格缩小)

    word怎么把表格放在一页(word怎么把表格缩小)

  • 【AIGC】大模型协作系统 HuggingGPT 深度解析(dac模型)

    【AIGC】大模型协作系统 HuggingGPT 深度解析(dac模型)

  • FormData详解(formdata方法)

    FormData详解(formdata方法)

  • c++常见关键字总结(c++32个关键字详解)

    c++常见关键字总结(c++32个关键字详解)

  • 出口退税计算公式 中华会计网校
  • 拿工资要开发票,发票去哪儿开?
  • 新公司成立后的第一个文件是什么
  • 福利费用属于工资吗
  • 税款已缴未入库是怎么回事
  • 抚恤金入账
  • 股权转让交的税如何做账
  • 融资租入固定资产属于资产吗
  • 航天金税交499
  • 纳税总额包括代扣代缴个人所得税吗
  • 砂石加工行业交什么税
  • 一般纳税人销售旧货
  • 去年的税还能退吗
  • 不得抵扣且未抵扣什么意思
  • 金税盘开的发票显示未报送怎么办
  • 提高并购成本
  • 资产负债表资产总额为负数
  • 企业报税的详细流程期限为
  • 海关票怎么认证
  • 业务费用包干制
  • 投资公司抛售原始股如何交税?
  • 个体工商户怎么交社保
  • 税务局手续费返还
  • 购买电脑应该怎么做账
  • win7为什么现在不能用了
  • wordpress 设置
  • 第三方开发是什么意思
  • 对公转账需要填写开户行吗
  • 弥补以前年度亏损怎么填申报表
  • 苹果电脑字体文件怎么拖出来
  • 安克雷奇的秃鹰怎么打
  • 微信php开发教程
  • 调整以前年度亏损
  • php 上传图片
  • 人工智能专业计算机科学与技术
  • 金税盘发票数据导出不完整
  • 开具信用证费用由谁承担
  • 前端文件的上传和下载
  • showmount命令安装
  • php从服务器下载文件
  • phpstorm创建php文件
  • 已缴纳增值税还可以退吗
  • wndgui降级
  • mybatis的
  • 公司组织出国旅游可以不带钱吗
  • 补发工资如何做账
  • 子公司再设立子公司
  • 股东投资是否有资金实际收支活动?
  • show processlist
  • 机械租赁属于什么科目
  • 应交税费应交增值税明细账图
  • 捐赠支出入账
  • 高新技术企业进项税加计扣除10%如何填企业所得税季报
  • 支付系统安装
  • 如果我们交了房租,对方不给我们开发票
  • 单位社保缴费基数比例
  • 社保可以不计提账务处理
  • 公司购买的办公楼怎么交房产税
  • 流动比率越高越好吗
  • mysql根据时间查询最新一条数据
  • mysql与sqlyog
  • 收集整理的近义词
  • Winxp安装光盘修复
  • 邮件远程控制
  • xp安装磁盘格式
  • winxp win10哪个快
  • windows 10预览版
  • jquery 属性
  • javascript面向对象编程 PDF
  • formatter参数
  • windowsxp命令行窗口怎么打开
  • Android通过HttpURLConnection获取JSON并进行UI更新
  • jquery移出class
  • unity安装进度条不动
  • python3 django教程
  • android源码下载地址
  • JavaScript程序设计形考任务第一次任务
  • 用友u8外部凭证怎么删除
  • 湖南耕地占用税标准
  • 建筑类的发票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设