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

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