本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-03(417)

2021-04(177)

2021-05(161)

2021-06(101)

2021-07(7)

vue调用子组件方法显示 is not a function

发布于2021-03-07 21:24     阅读(761)     评论(0)     点赞(9)     收藏(5)


问题:显示Error in v-on handler: "TypeError:this.$refs.fieldText.getFieldText is not a function

我是在网上找的父组件调用子组件的方法,如下

子组件的方法,返回子组件data里面的数据

	methods:{
		 getFieldText(){
		 return this.fieldText;
	}

父组件关键代码

 //引入子组件
 import BapSearchFileld from '@/units/bapcomponets/bap-search/bap-search-field'
 //注册子组件
 'bap-sea-fileld':BapSearchFileld,
 //子组件
  <bap-sea-fileld  .... ref="fieldText"/>
  //触发事件
  commmitForm(){
  console.log(this.$refs.fieldText.getFieldText());
  }

我这里是通过确定按钮的点击事件获取子组件的输入,页面截图和报错截图如下:

在这里插入图片描述
在这里插入图片描述

然后我检查了ref的值,还有语句是否输错,发现都没问题,网上也是这么写的,然后我输出this.$refs,如下:
在这里插入图片描述
发现this.refs是一个对象,里面的属性是绑定的各个ref,而属性值是一个数组,所以我改了引用的方式,成功输出!:

console.log(this.$refs.fieldText[0].getFieldText());
//test

在这里插入图片描述

总结:在测试过程中,如果显示undefined的错误,可以看看是不是ref与refs的值是否一致,然后考虑在调用子组件方法时子组件是否渲染完成。每个人在实际开发中遇到的问题都不一样,不要一味相信网上教程,要学会自己思考与解决。




所属网站分类: 技术文章 > 博客

作者:代码搬运工

链接:http://www.qianduanheidong.com/blog/article/33550/60a4ce5af47d0b3d8bb8/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

9 0
收藏该文
已收藏

评论内容:(最多支持255个字符)