vue-property-decoratorの書き方まとめ

<template>
    <div>{{ name }}</div>
</template>
<script>
export default {
  name: 'Sample',
  components: {
    Button
  },
  mixins: [
    PageMixin
  ],
  props: {
    isVisible: { type: Boolean, default: false }
  },
  data() {
    return {
      name: 'sample',
    }
  },
  computed: {
    computedName() {
      return this.name + '-computed'
    }
  },
  methods: {
    sampleMethod() {
      return 'sample methods'
    },
    onClickSaveName() {
      this.$emit('save', this.name)
    }
  }
  mounted() {},
  beforeDestroy() {},
}
</script>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  components: {
    Button
  },
  mixins: [
    PageMixin
  ],
})
export default class Sample extends Vue {
  @Prop({ type: Boolean, defualt: false })
  isVisible: boolean;
  name = 'sample'
  
  get computedName() {
    return this.name + '-computed'
  }
  sampleMethod() {
    return 'sample methods'
  }
  mounted() {}
  beforeDestroy() {}
  
  @Emit()
  save() { return this.name }
}
</script>

<template>
  <custom-button ref="buttonSave">Save</custom-button>
</template>

<script>
export default {
  name: 'Sample',
  components: {
    CustomButton
  },
  methods: {
    sampleMethod() {
      this.$refs.buttonSave.xxxx()
      ...
    }
  }
}
</script>

(this.$refs.buttonSave as any).xxxx()

<template>
  <custom-button ref="buttonSave">Save</custom-button>
  <button ref="buttonSave2">Save2</button>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component()
export default class SampleComponent extends Vue {
  @Ref() buttonSave: CustomButton
  @Ref() buttonSave2: HTMLButtonElement
  
  sampleMethod() {
    this.buttonSave.xxxx()
    ...
  }
}
</script>