Because in my own project, some commonly used modules define their own components, which often appear when using
TypeError: this.$refs.xxx is not a function (that is, there is no xxx method), combined with the problems encountered by netizens and themselves, three methods are obtained
The first type: reference registration is to import components in the page.
import upimg from "../../components/store/user_photo.vue";
或者
import upimg from "@/components/store/user_photo.vue";
这两种方法都可以在页面中引入注册组件Solution: Check whether the component reference is correct.
The second type: the component is in the loop
<view v-for="(item,index) in list">
<component-father ref="outsideComponentRef">
</component-father>
<text>组件在循环了引用</text>
</view >
Solution: Add a subscript such as: this.$refs[xxx][0]
However, the error report of my mistake is not in the above two cases, so there is a third method (as for other cases, it has not been found yet, and you are welcome to correct and add)
The reason for my error was that the component was named wrong! At first I thought that the components could be named whatever they wanted. After reading the official documentation , components have a naming format:
① 下划线 例如 kebab-case
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。
② 首字母大写命名 即： PascalCase
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。 也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。Hope to help everyone!