Question

我最近开始使用带有Typescript的vue类组件，并且找不到用导入的实用程序方法装饰组件类的方法。我正在使用nuxt-property-decorator装饰我的组件。

我尝试添加该方法，就像我在不使用打字稿的vue组件中这样做一样：

import doSomething from './somewhere';

<script>
    export default {
        methods: {
            doSomething,// I'd do this without typescript, works as expected
        },
    }
</script>

<script lang="ts">
    import Vue from 'vue';
    import {Component} from 'nuxt-property-decorator';
    import doSomething from './somewhere';

    @Component
    export default class MyCustomClass extends Vue {
        doSomething, // Doesn't, "Property or method doSomething is not defined on the instance but referenced during render..."

        hacky() {
            return doSomething(); // I guess I could do it this way, but this looks like a very hacky way
        }
    }
</script>

Answer 1

在我使用vue-property-decorator之前。据我所知nuxt-property decorator是基于它的。

不确定这是否是您要查找的内容，但是如果要在组件初始化上运行某些操作，则可以在组件内部使用mounted。这是生命周期挂钩

示例：

        import doSomething from './somewhere';

        <script>
            export default {
                methods: {
                    doSomething,// I'd do this without typescript, works as expected
                },
            }
        </script>

        <script lang="ts">
            import Vue from 'vue';
            import {Component} from 'nuxt-property-decorator';
            import doSomething from './somewhere';

            @Component
            export default class MyCustomClass extends Vue {

                public mounted(){
                  doSomething...
                  // everything in this method  will be triggered on component load
                }
            }
        </script>

Answer 2

解决此问题的方法是简单地使用@Component用以下方法装饰组件：

<script lang="ts">
    @Component({
        methods: {
            preventContextMenu,
        },
    })
    export default class MyCustomClass extends Vue {
        ...
    }
</script>

如何使用导入的方法装饰Typescript Vue类组件？

2 个答案: