preface

When using TypeScript syntax in Vue2.0, you need to reference vue-property-decorator.

Vue-property-decorator depends entirely on vue-class-Component, so you can look at vue-class-Component before using vue-property-decorator.

Vue-property-decorator transforms the VUue 2.0 declarative writing style into a constructor style using es6 decorators. The main goal is to make the VUE development pattern more engineering.

Install

npm i -S vue-class-component
npm i -S vue-property-decorator 
Copy the code

usage

Here are a few decorators and a function (Mixin):

  • @Prop
  • @PropSync
  • @Model
  • @ModelSync
  • @Watch
  • @Provide
  • @Inject
  • @ProvideReactive
  • @InjectReactive
  • @Emit
  • @Ref
  • @VModel
  • @Component(Provided by vue-class-Component)
  • Mixins (mixinsFunction provided by vue-class-component)

The sample

@Component cannot be omitted even if there is no Component; otherwise, an error will be reported.

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

@Component
export default class extends Vue { 
}
</script>
Copy the code

A component reference

import { Component, Vue } from "vue-property-decorator";
import DemoComponent"./DemoComponent.vue";
@Component({
  components: {
    DemoComponent
  }
})
export default class YourComponent extends Vue { 
}
Copy the code

@prop Passing values between parent and child components

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
 
@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined 
}
</script>
Copy the code

The equivalent of

export default {
  props: {
    propA: {
      type: Number,
    } 
  },
}
Copy the code

If you don’t want to set the type of each prop, you can use reflect-metadata.

npm install reflect-metadata -D
Copy the code
<script lang="ts"> import { Vue, Component, Prop } from 'vue-property-decorator' import 'reflect-metadata' @Component export default class extends Vue { @Prop() age! : number } </script>Copy the code

The @propsync decorator is equivalent to adding a.sync decorator to the parent component so that the child component can update the value of prop as well. For details, see the.sync modifier

<script lang="ts"> import { Vue, Component, PropSync } from 'vue-property-decorator' @Component export default class extends Vue { @PropSync('name', { type: String }) syncedName! : string; ChangeName (): void {this.syncedName = 'syncedName! '; // Changing syncedName changes the parent component's name}} </script>Copy the code

@watch listens for properties

import { Vue, Component, Watch } from 'vue-property-decorator'
 
@Component
export default class YourComponent extends Vue {
  @Watch('child')
  onChildChanged(val: string, oldVal: string) {}
 
  @Watch('person', { immediate: true, deep: true })
  onPersonChanged1(val: Person, oldVal: Person) {}
}
Copy the code

Is equivalent to:

export default {
  watch: {
    child: [
      {
        handler: 'onChildChanged',
        immediate: false,
        deep: false,
      },
    ],
    person: [
      {
        handler: 'onPersonChanged1',
        immediate: true,
        deep: true,
      } 
    ],
  },
  methods: {
    onChildChanged(val, oldVal) {},
    onPersonChanged1(val, oldVal) {} 
  },
}
Copy the code

@Emit

import { Vue, Component, Emit } from 'vue-property-decorator'
 
@Component
export default class YourComponent extends Vue {
  @Emit()
  addToCount(n: number) { 
  }
 
  @Emit('reset')
  resetCount() {
    this.count = 0
  } 
}
Copy the code

Is equivalent to:

export default {
  methods: {
    addToCount(n) { 
      this.$emit('add-to-count', n)
    },
    resetCount() { 
      this.$emit('reset')
    } 
}
Copy the code

Mixins mix with public methods

import { Component, Vue } from "vue-property-decorator";
import mixinsMethod from '@/plugins/mixins.js';

@Component({
  components: {},
  mixins:[mixinsMethod]
})
export default class YourComponent extends Vue { 
}
Copy the code

Calculate the property to use only the start of get + method + return value

import { Component, Vue } from "vue-property-decorator"; @component export default class YourComponent extends Vue {type: number = 0} any = { 1: 'Taobao', 2: 'Pdd', }; return type[this.type]; }}Copy the code

vue-property-decorator – npm

vue-class-component