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
·
问题:显示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的值是否一致,然后考虑在调用子组件方法时子组件是否渲染完成。每个人在实际开发中遇到的问题都不一样,不要一味相信网上教程,要学会自己思考与解决。
更多推荐
已为社区贡献1条内容
所有评论(0)