Javascript 在其他Vue组件中使用常用方法

在

compA.vue

和其他一些假设的

compB.vue

中使用方法

isValidEmail

的正确方法是什么

这种方法不适合我：

<template>
    <div></div>
</template>
<script>
export default {
    name: 'Validators',
    methods: {
        isValidEmail(someEmail) {
            //Omitted
        },
    }
}
</script>

<template>
    <div>{{isValidEmail('test1@gmail.com')}}</div>
</template>
<script>
import Validators from 'validators.vue'

export default {
    name: 'CompA',
    components: {
        'validators': Validators
    },  
}
</script>

导出默认值{
名称：'验证程序'，
方法：{
iValidEmail（someEmail）{
//省略
},
}
}
{{isValidEmail（'test1@gmail.com')}}
从“Validators.vue”导入验证程序
导出默认值{
名称：'CompA'，
组成部分：{
“验证器”：验证器
},  
}

您可以简单地使用mixin：在mixin中定义函数

isValidEmail

，然后将mixin导入所需的组件中

-Vue v2
-Vue v3

例如，与您在示例中创建组件

Validators.vue

不同，您可以创建名为

Validators.js

的mixin，如下所示：

export default {
    methods: {
        isValidEmail(someEmail) {
            //Omitted
        }
    }
}

然后，您可以在需要的组件中导入mixin：

{{isValidEmail（'test1@gmail.com')}}
从“Validators.js”导入MixInvalidater
导出默认值{
名称：'CompA'，
mixins:[mixinvalidater]，
}

---

这样，组件

CompA

将继承mixin中定义的所有函数、数据和计算属性。

它们是父/子还是不相关？不相关。我试图找到如何使用javascripts方法的公共“存储库”，我可以在不相关的vue组件中使用这些方法