When writing a component, use the imported method XXXX directly in HTML to report an error.
Property or method “XXXX” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class- based components, by initializing the property
This is the method written externally
export const XXXX = (val) =>{
return val+1
}
This is the wrong way to use it where called
<template>
<div>
{
{
XXXX(123)}}
</div>
</template>
import {
XXXX } from "@/utils";
Writing like this directly reports an error, because the HTML, CSS, and JS in the vue component are on the same page, but the externally referenced functions and variables need to be used by HTML after export default{} is thrown.
Therefore, like variables, it is best to assign values and declare them once before using them.
Correct usage
<template>
<div>
{
{
ABC(123)}}
</div>
</template>
import {
XXXX } from "@/utils";
export default {
name:"123",
methods: {
ABC(num) {
return XXXX(num);
},
}
}