How to customize Public function in vue

problem description

in the vue project, I want to encapsulate some common functions. I encapsulated the functions, but I moved the functions to a public file and loaded them on demand, prompting me: _ vm.xFunction is not a function
[question]: what is the format in which common functions are defined in vue and support on-demand calls?

related codes

lib/utils.js   /
export default {
    xFunction (e) {
        ...
        return ...
    }
}

//
A.vue
<template>
    <div>
        <el @click="xFunction(xx)"></el>
    </div>
</template>
<script>
    import { xFunction } from "@/lib/utils"
</script>

what result do you expect? What is the error message actually seen?

what"s wrong with my writing above? Can the gods give us some advice?

Nov.20,2021

it is a way to register upstairs to the instance, but the key to your problem may be to understand that
@ click itself is not in place to find the method in the method in the current environment. It feels similar to this.methods.xFunction,. Although the xFunction you wrote above has been introduced, it is not associated with the current methods, so there is another way to write it that is not registered to the global

.
lib/utils.js   /
export default {
    xFunction (e) {
        ...
        return ...
    }
}

//
A.vue
<template>
    <div>
        <el @click="xFunction(xx)"></el>
    </div>
</template>
<script>
    import { xFunction } from '@/lib/utils'
    export default {
        ...
        methods: {
            xFunction() {
                xFunction()
            }
        }    
        ...
    }
</script>

first import import utils from'. / utils.js'
from main.js and then Vue.prototype.$utils = utils

< el @ click= "$utils.xFunction (xx)" > < / el >

in

component < hr >

add

clipboard.png

Menu