在其他 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&nbsp;- Vue v2https://v3.vuejs.org/guide/mixins.html&nbsp;- Vue v3例如，您可以创建一个名为 mixin 的 mixin，而不是像Validators.vue您在示例中那样创建组件：Validators.jsexport default {&nbsp; &nbsp; methods: {&nbsp; &nbsp; &nbsp; &nbsp; isValidEmail(someEmail) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Omitted&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}然后你可以在你需要的组件中导入mixin：<template>&nbsp; &nbsp; <div>{{isValidEmail('[e-mail]')}}</div></template><script>import MixinValidator from 'Validators.js'export default {&nbsp; &nbsp; name: 'CompA',&nbsp; &nbsp; mixins: [ MixinValidator ],}</script>这样，组件CompA将继承mixin中定义的所有函数、数据和计算属性。