问题:显示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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐