问题:显示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的值是否一致,然后考虑在调用子组件方法时子组件是否渲染完成。每个人在实际开发中遇到的问题都不一样,不要一味相信网上教程,要学会自己思考与解决。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐