добавить параметры в. vue файл - PullRequest
Новая
       12

добавить параметры в. vue файл

0 голосов
/ 26 апреля 2020

В 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 - вычисляемые / методы и прочее.

ясно, я упускаю что-то очень простое здесь ...

Ответы [ 2 ]

0 голосов
/ 02 мая 2020

, следуя совету Стивена Б., вот как я это решил: 

<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 */ }
    }
*/ 

}
0 голосов
/ 26 апреля 2020

Я использую следующую структуру пути для моего компонента 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 {} }
})
...