vue-property-decorator usage

vue-property-decorator The library is fully dependent on the VUE-class-the Component , so before using this library please read it, no matter what it is going to decorator

 

vue-property-decorator

This component is entirely dependent on vue-class-componentit have the following properties:

• @Component (fully inherited vue-class-component)
• @Emit
• @Inject
• @Provice
• @Prop
• @Watch
• @Model
• Mixins (in the vue-class-componentdefinition);

use

When we vueuse a single file TypeScriptwhen introduced vue-property-decoratorafter scriptthe label becomes this:

<script lang="ts"> import {Vue, Component} from 'vue-property-decorator'; @Component({}) export default class "组件名" extends Vue{ ValA: string = "hello world"; ValB: number = 1; } </script> 

Equivalent to

<script lang="es6"> import Vue from 'vue'; export default { data(){ return { ValA: 'hello world', ValB: 1 } } } </script> 

• Summary: For datayears on top of variables, we can press directly tsdefine class variables wording written on it

Well, if it is to calculate the properties? This use to getterthe.

<script lang="ts"> import {Vue, Component} from 'vue-property-decorator'; @Component({}) export default class "组件名" extends Vue{ get ValA(){ return 1; } } </script> 

Equivalent to

<script lang="es6"> import Vue from 'vue'; export default { computed: { ValA: function() { return 1; } } } </script> 

• Summary: For Vuethe calculation of the properties, we only need to calculate the attribute name is defined as a function, and a function with the getkeywords.

Originally Vuethe computedinside of each calculation property have become the prefix getfunction.

---

@Emit

About Vuemonitor and trigger events, Vueit provides two functions $emitand $on. Then vue-property-decoratorhow to use it?
That's where vue-property-decoratoroffered @Emitproperty.

<script lang="ts"> import {Vue, Component, Emit} from 'vue-property-decorator'; @Component({}) export default class "组件名" extends Vue{ mounted(){ this.$on('emit-todo', function(n) { console.log(n) }) this.emitTodo('world'); } @Emit() emitTodo(n: string){ console.log('hello'); } } </script> 

Running the above code will print 'hello' 'world', why? Let's see what it is equivalent to

<script lang="es6"> import Vue from 'vue'; export default { mounted(){ this.$on('emit-todo', function(n) { console.log(n) }) this.emitTodo('world'); }, methods: { emitTodo(n){ console.log('hello'); this.$emit('emit-todo', n); } } } </script> 

It can be seen in @Emitthe function decorator will trigger equivalent to their function name (after running 驼峰式会转为横杠式写法) event and pass it to the function $emit.
If we want to trigger specific events do, such as emitTodounder the trigger resetevent:

<script lang="ts"> import {Vue, Component, Emit} from 'vue-property-decorator'; @Component({}) export default class "组件名" extends Vue{ @Emit('reset') emitTodo(n: string){ } } </script> 

We just need to give decorator @Emitpasses an event name parameter resetso that the function emitTodowill be triggered after running resetevent.

• Summary: VueWe are using a $emittrigger event, the use of vue-property-decoratortime, can help @Emitto achieve a decorator. @EmitModified function accepts arguments passed after the operation when the triggering event in the past.
  @EmitTriggering event, there are two writing

1. @Emit()Does not pass parameters, then it triggers an event name is that it modifies the function name.
2. @Emit(name: string), Which passes a string that is the name of the event to be triggered.

---

@Watch

We can use the vue-property-decoratoroffer @Watchto replace the decorators Vuein the watchproperty, in order to monitor changes in value.

In Vueuse, the listener is as follows:

export default{
    watch: {
        'child': this.onChangeValue // 这种写法默认 `immediate`和`deep`为`false` , 'person': { handler: 'onChangeValue', immediate: true, deep: true } }, methods: { onChangeValue(newVal, oldVal){ // todo... } } } 

So how do we use the @Watchdecorator to transform it do?

import {Vue, Component, Watch} from 'vue-property-decorator';

@Watch('child')
onChangeValue(newVal: string, oldVal: string){
    // todo... } @Watch('person', {immediate: true, deep: true}) onChangeValue(newVal: Person, oldVal: Person){ // todo... } 

• Summary: @WatchVery easy to use, accept the first argument is the name of the second property to listen for the optional subject. @WatchThe decorative function that is listening to operate after the property changes.

---

@Prop

We use Vuesometimes encounter parameters subassemblies receiving parent component to pass the time. We need to define the Propproperties.

For example subassembly receives three attributes from the parent component propA, propB, propC.

• propATypeNumber
• propBThe default valuedefault value
• propCType StringorBoolean

export default {
  props: {
    propA: {
      type: Number
    },
    propB: {
      default: 'default value' }, propC: { type: [String, Boolean] }, } } 

We use the vue-property-decoratoroffer @Propcan be transformed into the above code as follows:

<script lang="ts"> import {Vue, Component, Prop} from 'vue-property-decorator'; @Component({}) export default class "组件名" extends Vue{ @Prop(Number) propA!: number; @Prop({default: 'default value'}) propB!: string; @propC([String, Boolean]) propC: string | boolean; } </script> 

Here !and optional parameters ?are reversed, !tell TypeScriptme there must have value.

• Summary: @Propaccept a parameter may be a variable or an object or array type. @PropAcceptance of such type Numberis JavaScripta type, after the attribute type is defined TypeScripttype.

---

Mixins

In use Vueduring development we often use to mix, combine TypeScriptafter we have two mixinsmethods.

One is vue-class-componentprovided.

//定义要混合的类 mixins.ts
import Vue from 'vue';
import Component from 'vue-class-component'; @Component // 一定要用Component修饰 export default class myMixins extends Vue { value: string = "Hello" } 

// 引入
import  Component  {mixins}  from 'vue-class-component';
import myMixins from 'mixins.ts'; @Component export class myComponent extends mixins(myMixins) { // 直接extends myMinxins 也可以正常运行 created(){ console.log(this.value) // => Hello } } 

The second way is @Componentmixed in.

We transform the look mixins.ts, the definition vue/type/vuemodule, Vuethe interface

// mixins.ts
import { Vue, Component } from 'vue-property-decorator';


declare module 'vue/types/vue' { interface Vue { value: string; } } @Component export default class myMixins extends Vue { value: string = 'Hello' } 

Mixing

import { Vue, Component, Prop } from 'vue-property-decorator';
import myMixins from '@static/js/mixins'; @Component({ mixins: [myMixins] }) export default class myComponent extends Vue{ created(){ console.log(this.value) // => Hello } } 

• Summary: two different ways in the definition mixinsif not defined vue/type/vuemodule, then they would have in the mix when 继承the mixins; If the definition vue/type/vuemodule, when mixed can be @Componentin mixinsdirect mixed.

---

@Model

VueComponent provides model: {prop?: string, event?: string}so that we can customize propand event.
By default, the component v-modelwill valuebe used as propand the inputused event, but some of the input types such as buttons and check boxes may want to use value propfor different purposes. Use modeloptions to avoid these situations of conflict arising.

• The following are Vueexamples of the official website

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change' }, props: { // this allows using the `value` prop for a different purpose value: String, // use `checked` as the prop which take the place of `value` checked: { type: Number, default: 0 } }, // ... }) 

<my-checkbox v-model="foo" value="some value"></my-checkbox> 

The code above is equivalent to:

<my-checkbox
  :checked="foo"
  @change="val => { foo = val }" value="some value"> </my-checkbox> 

That footwo-way binding is a component of checkethe event is to trigger the two-way binding valuechange

Use vue-property-decoratorprovided @Modelexamples of the transformation of the above.

import { Vue, Component, Model} from 'vue-property-decorator';

@Component
export class myCheck extends Vue{ @Model ('change', {type: Boolean}) checked!: boolean; }