主页 / 问题 / 1075259
Accepted
dmitriy
Asked:2020-01-28 15:18:28 +0000 UTC2020-01-28 15:18:28 +0000 UTC

Vue中如何动态更改组件中的方法名

  • 772

有 2 个动态部分 Question 和 Answer，这两个部分中的每一个都有一个组件 question/test.vue 和 answer/test.vue 并且它们完全相同，除了方法名称，question/test.vue 有一个 changeQuestion()方法和答案/测试 .vue 有一个 changeAnswer() 方法。我想将 test.vue 移动到全局组件，但是如何解决方法名称不同的问题？

答案/test.vue

<template>some code</template>
<script>
import { mapActions, mapGetters } from 'vuex';

export default {
    name: 'Test',

    methods: {
        ...mapActions(['changeAnswer']),

        onChange(state) {
            this.changeAnswer();
        },

        pageChange() {...}
    },
};
</script>

问题/test.vue

<template>some code</template>
<script>
import { mapActions, mapGetters } from 'vuex';

export default {
    name: 'Test',

    methods: {
        ...mapActions(['changeQuestion']),

        onChange(state) {
            this.changeQuestion();
        },

        pageChange() {...}
    },
};
</script>
vue.js

1 个回答

  1. Best Answer

    我认为在这里添加一个组件属性（props）就足够了。

    例如，让我们创建一个新组件：test/test.vue

    <template>some code</template>
<script>
import { mapActions, mapGetters } from 'vuex';

export default {
    name: 'Test',
    props: {
        action: {
            type: String,
            required: true
        }
    },
    methods: {
        ...mapActions([this.action]),
        
        onChange(state) {
            this[this.action]();
        },

        pageChange() {...}
    },
};
</script>

    你可以像这样使用它：

    <test action="changeQuestion"/>

    更多详细信息可以在官方文档页面上找到。

    • 0

相关问题