向 .vue 文件添加选项答案

【问题标题】：add options to .vue file向 .vue 文件添加选项
【发布时间】：2020-08-10 02:48:52
【问题描述】：

在 vue 文档中，您会看到如下内容：

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  template: `<div>
        {{ message }}
    </div>`,
  methods: {
    reverseMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

但是我使用的是结构不同的 .vue 文件：

<template>
    <div>
        {{ message }}
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class PlayerBid extends Vue {
    data() {
        return { message: 'Hello' };
    }
}

但我不知道如何在 vue-computed/methods 和其他东西中添加所有其他（很棒的）选项。

显然，我在这里遗漏了一些超级简单的东西......

【问题讨论】：

您使用的是类风格，所以我会先查看this，然后查看this 的装饰器。
@StevenB。太棒了，好像是我要找的东西，看看这个

标签： typescript vue.js vue-component

【解决方案1】：

我的 TS 组件使用以下方式结构

export default Vue.extend({
    name: 'PlayerBid'
    data() {
        return { message: 'Hello' };
    },
    computed: {},
    methods: {}
})

当我有一些东西可以参考时

import Vue, { VueConstructor } from 'vue'


interface IPlayerBid extends Vue {
  $refs: { foo: Vue }
}

export default (Vue as VueConstructor<IPlayerBid>).extend({
  name: 'PlayerBid',
  data() { return {} }
})

【讨论】：

它与我的问题有什么关系？

【解决方案2】：

按照 Steven B 的建议，我是这样解决的：

<template>
    <div>
        {{ message }}
        {{ myComputed }}
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class PlayerBid extends Vue {
    data() {
        return { message: 'Hello' };
    }

    get myComputed() { return this.$data.message + ' computed !'; }

    method1() { /* do something useful here */ }
/* 
this is the same as 
    computed: {
        myComputed: () => { return data.message + ' computed !'; }
    },
    methods: {
       method1: () =>  { /* do something useful here */ }
    }
*/ 

}

【讨论】：