VueJS: динамически устанавливаемые методы компонента - PullRequest
Новая
       5

VueJS: динамически устанавливаемые методы компонента

0 голосов
/ 14 февраля 2020

У меня есть приложение 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>

Ответы [ 2 ]

1 голос
/ 14 февраля 2020

Это описание кажется проблемой, которую может решить шаблон разработки стратегии, потому что вам нужно другое поведение в зависимости от имени маршрута. Проверьте это сообщение . Если это не ваше намерение, вы можете попробовать Vue динамика c компонентов .

0 голосов
/ 18 февраля 2020

Как отметил Дэн в комментариях, это невозможно . Итак, я подошел к концепции паттерна Стратегии, предложенной 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() могут работать не всегда.

...