VueJS：动态设置组件的方法答案

【问题标题】：VueJS: dynamically set component's methodsVueJS：动态设置组件的方法
【发布时间】：2020-05-30 03:06:41
【问题描述】：

我有一个带有单页组件的 SPA 应用程序；我想根据我的路由名称为组件导入某些方法。如何在 Vue 中实现这一点？比如：

<template>
    <div>
        <div v-for="foo in customMethod()">{{foo.bar}}</div>
    </div>
</template>

<script>
export default {
    methods: {},

    mounted: function() {
        switch(this.$route.name) {
            case "route.name":
                this.methods = require('./external-script.js');
                break;
            case "another.route.name":
                this.methods = require('./another-external-script.js');
                break;
        }
    }
}

</script>

【问题讨论】：

为什么要这样做，因为你已经有一个 switch 语句，所以你可以根据路由名称调用不同的函数？这对我来说就像一个 XY 问题。
我还需要调用模板中的方法。
方法名相同，返回类型相同，但内容不同。在这里声明它们并在每个内部创建 switch 语句来修改它们的行为是很痛苦的；我宁愿直接导入它们。
然后在您的模板中调用一个通用方法，并在方法中使用switch语句根据路由名称确定您要调用的具体方法。当您导入这些脚本时，您始终可以使用自定义别名。我在这里看不到你的迂回方法背后的原因。
您不能在组件内分配方法对象，否则会缺少 Vue 在组件创建期间执行的特殊配置。使用动态组件或插槽包装组件。

标签： javascript vue.js single-page-application

【解决方案1】：

正如丹在 cmets 中提到的，这是不可能的。因此，我按照 Evandro 的建议处理了策略模式概念。组件挂载时，我根据路由名称导入外部文件。

<template>
    <div>
        <div v-for="foo in method1()">{{foo.bar}}</div>
    </div>
</template>

<script>
export default {
    data: function() {
        m: {},
        // ..
    },

    methods: {
        method1: function(params) {
            return m.method1(params)
        },

        method2: async function(params){
            return await m.method2(params, this.another_param);
        },

        // ...
    },

    mounted: function() {
        switch(this.$route.name) {
            case "route.name":
                this.m = require('./external-script.js');
                break;
            case "another.route.name":
                this.m = require('./another-external-script.js');
                break;
        }
    }
}

</script>

请注意，根据您的组件的安装方式，包括基于mounted() 内路由的脚本可能并不总是有效。

【讨论】：

【解决方案2】：

这种描述似乎是策略设计模式可以解决的问题，因为您需要根据路由名称采取不同的行为。看看这个post。如果这不是你的意图，你可以试试 Vue dynamic components。

【讨论】：