uniapp 组件引用 TypeError: this.$refs.xxx is not a function 解决方法(全)

因为自己的项目中,某些常用模块自己定义了组件,使用时 常出现

TypeError: this.$refs.xxx is not a function (即没有xxx这个方法),结合网友和自身遇到的问题,得出三种方法

第一种:引用注册  即 在页面中 import 组件。 

import upimg from "../../components/store/user_photo.vue"; 

或者

import upimg from "@/components/store/user_photo.vue";

这两种方法都可以在页面中引入注册组件

解决方法:查看是否组件引用正确。

第二种:组件在循环里 

<view v-for="(item,index) in list">
    <component-father ref="outsideComponentRef">
    </component-father>
    <text>组件在循环了引用</text>
</view >

  解决方法:需加上下标 如: this.$refs[xxx][0] 

然而我的错的报错不是上面两种情况里所以还有第三种方法(至于其他的情况,目前还未发现,欢迎大家指正,添加)

我的报错原因时 组件命名错误!开始以为组件可以随意命名。看了官方文档,组件有命名格式的:

① 下划线  例如 kebab-case

当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例如 <my-component-name>。


② 首字母大写命名 即: PascalCase

当使用 PascalCase (首字母大写命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。 也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。

 希望能帮到大家!

猜你喜欢

转载自blog.csdn.net/u014538997/article/details/126436252