在其他 Vue 组件中使用公共方法

Question

使用 method isValidEmailwithincompA.vue和其他一些假设的正确方法是什么compB.vue？这种方法对我不起作用：<template>    <div></div></template><script>export default {    name: 'Validators',    methods: {        isValidEmail(someEmail) {            //Omitted        },    }}</script><template>    <div>{{isValidEmail('[e-mail]')}}</div></template><script>import Validators from 'validators.vue'export default {    name: 'CompA',    components: {        'validators': Validators    },  }</script>

Answer 1

您可以简单地使用 mixins：您在 mixin 中定义函数isValidEmail，然后在您需要的组件中导入 mixin。

https://v2.vuejs.org/v2/guide/mixins.html - Vue v2
https://v3.vuejs.org/guide/mixins.html - Vue v3

例如，您可以创建一个名为 mixin 的 mixin，而不是像Validators.vue您在示例中那样创建组件：Validators.js

export default {

    methods: {

        isValidEmail(someEmail) {

            //Omitted

        }

    }

}

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

<template>

    <div>{{isValidEmail('[e-mail]')}}</div>

</template>

<script>

import MixinValidator from 'Validators.js'

export default {

    name: 'CompA',

    mixins: [ MixinValidator ],

}

</script>

这样，组件CompA将继承mixin中定义的所有函数、数据和计算属性。