Understand vue-property-decorator in one minute

<template>
  <div>
    foo:{{foo}}
    defaultArg:{{defaultArg}} | {{countplus}}
    <button @click="delToCount($event)">Clickdel emit</button>
    <HellowWordComponent></HellowWordComponent>
    <button ref="aButton">ref</button>
  </div>
</template>
 
<script lang="ts">
import { Component, Vue, Prop, Emit, Ref } from 'vue-property-decorator';
import HellowWordComponent from '@/components/';
 
@Component({
  components: {
    HellowWordComponent,
  },
  beforeRouteLeave(to: any, from: any, next: any) {
    ('beforeRouteLeave');
    next();
  },
  beforeRouteEnter(to: any, from: any, next: any) {
    ('beforeRouteLeave');
    next();
  },
})
 
export default class DemoComponent extends Vue {
  private foo = 'App Foo!';
 
  private count: number = this.$;
 
  @Prop(Boolean) private defaultArg: string | undefined;
 
  @Emit('delemit') private delEmitClick(event: MouseEvent) {}
 
  @Ref('aButton') readonly ref!: HTMLButtonElement;
 
  // computed;
  get countplus () {
    return ;
  }
 
  created() {}
 
  mounted() {}
 
  beforeDestroy() {}
 
  public delToCount(event: MouseEvent) {
    (event);
     += 1; // countplus will accumulate  }
 
}
 
</script>
 
<style lang="less">
...
</style>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
 
([
  'beforeRouteLeave',
  'beforeRouteEnter',
]);
 
@Component
export default class App extends Vue {
  beforeRouteLeave(to: any, from: any, next: any) {
    ('beforeRouteLeave');
    next();
  }
 
  beforeRouteEnter(to: any, from: any, next: any) {
    ('beforeRouteLeave');
    next();
  }
}
</script>

// Parent component:<template>
  <div class="Props">
    <PropComponent :name="name" :age="age" :sex="sex"></PropComponent>
  </div>
</template>
 
<script lang="ts">
import {Component, Vue,} from 'vue-property-decorator';
import PropComponent from '@/components/';
 
@Component({
  components: {PropComponent,},
})
export default class PropsPage extends Vue {
  private name = 'Zhang San';
  private age = 1;
  private sex = 'nan';
}
</script>
 
// Subcomponents:<template>
  <div class="hello">
    name: {{name}} | age: {{age}} | sex: {{sex}}
  </div>
</template>
 
<script lang="ts">
import {Component, Vue, Prop} from 'vue-property-decorator';
 
@Component
export default class PropComponent extends Vue {
   @Prop(String) readonly name!: string | undefined;
   @Prop({ default: 30, type: Number }) private age!: number;
   @Prop([String, Boolean]) private sex!: string | boolean;
}
</script>

// Parent component<template>
  <div class="PropSync">
    <h1>Parent component</h1>
    like:{{like}}
    <hr/>
    <PropSyncComponent :="like"></PropSyncComponent>
  </div>
</template>
 
<script lang='ts'>
import { Vue, Component } from 'vue-property-decorator';
import PropSyncComponent from '@/components/';
 
@Component({components: { PropSyncComponent },})
export default class PropSyncPage extends Vue {
  private like = 'Like the parent component';
}
</script>
 
// Subcomponents<template>
  <div class="hello">
    <h1>Subcomponents:</h1>
    <h2>syncedlike:{{ syncedlike }}</h2>
    <button @click="editLike()">Reviselike</button>
  </div>
</template>
 
<script lang="ts">
import { Component, Prop, Vue, PropSync,} from 'vue-property-decorator';
 
@Component
export default class PropSyncComponent extends Vue {
  @PropSync('like', { type: String }) syncedlike!: string; // Used to implement two-way binding of components, children can change the value passed by the parent component 
  editLike(): void {
     = 'Syncedlike after the modified subcomponent!'; // Two-way binding, changing the synchronization like will change the parent component's like  }
}
</script>

// Parent component<template>
  <div class="Model">
    <ModelComponent v-model="fooTs" value="some value"></ModelComponent>
    <div>Parent component app : {{fooTs}}</div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ModelComponent from '@/components/';
 
@Component({ components: {ModelComponent} })
export default class ModelPage extends Vue {
  private fooTs = 'App Foo!';
}
</script>
 
// Subcomponents<template>
  <div class="hello">
    Subcomponents:<input type="text" :value="checked" @input="inputHandle($event)"/>
  </div>
</template>
 
<script lang="ts">
import {Component, Vue, Model,} from 'vue-property-decorator';
 
@Component
export default class ModelComponent extends Vue {
   @Model('change', { type: String }) readonly checked!: string
 
   public inputHandle(that: any): void {
     this.$emit('change', ); // I will talk about @Emit later, here I will use this.$emit instead   }
}
</script>

<template>
  <div class="PropSync">
    <h1>child:{{child}}</h1>
    <input type="text" v-model="child"/>
  </div>
</template>
 
<script lang="ts">
import { Vue, Watch, Component } from 'vue-property-decorator';
 
@Component
export default class WatchPage extends Vue {
  private child = '';
 
  @Watch('child')
  onChildChanged(newValue: string, oldValue: string) {
    (newValue);
    (oldValue);
  }
}
</script>

// Parent component<template>
  <div class="">
    ClickemitGet the name of the child component<br/>
    Name:{{}}
    <hr/>
    <EmitComponent sex='female' @add-to-count="returnPersons" @delemit="delemit"></EmitComponent>
  </div>
</template>
 
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import EmitComponent from '@/components/';
 
@Component({
  components: { EmitComponent },
})
export default class EmitPage extends Vue {
  private emitData = { name: 'I don't have a name yet' };
 
  returnPersons(data: any) {
     = data;
  }
 
  delemit(event: MouseEvent) {
    ();
    (event);
  }
}
</script>
 
// Subcomponents<template>
  <div class="hello">
    Subcomponents:
    <div v-if="person">
      Name:{{}}<br/>
      age:{{}}<br/>
      gender:{{}}<br/>
    </div>
    <button @click="addToCount(person)">Clickemit</button>
    <button @click="delToCount($event)">Clickdel emit</button>
  </div>
</template>
 
<script lang="ts">
import {
  Component, Vue, Prop, Emit,
} from 'vue-property-decorator';
 
type Person = {name: string; age: number; sex: string };
 
@Component
export default class PropComponent extends Vue {
  private name: string | undefined;
 
  private age: number | undefined;
 
  private person: Person = { name: 'I am Zhang San of the child component', age: 1, sex: 'male' };
 
  @Prop(String) readonly sex: string | undefined;
 
  @Emit('delemit') private delEmitClick(event: MouseEvent) {}
 
  @Emit() // If no alias is set here, the following function name is used by default  addToCount(p: Person) { // If there are capital letters, you need to separate them with horizontal lines @add-to-count    return ; // If you do not return here, the parameter p in brackets will be used by default;  }
 
  delToCount(event: MouseEvent) {
    (event);
  }
}
</script>

<template>
  <div class="PropSync">
    <button @click="getRef()" ref="aButton">Getref</button>
    <RefComponent name="names" ref="RefComponent"></RefComponent>
  </div>
</template>
 
<script lang="ts">
import { Vue, Component, Ref } from 'vue-property-decorator';
import RefComponent from '@/components/';
 
@Component({
  components: { RefComponent },
})
export default class RefPage extends Vue {
  @Ref('RefComponent') readonly RefC!: RefComponent;
  @Ref('aButton') readonly ref!: HTMLButtonElement;
  getRef() {
    ();
    ();
  }
}
</script>

// Outermost component<template>
  <div class="">
    <H3>ProvideInjectPagepage</H3>
    <div>
      existProvideInjectPagepage使用Provide,ProvideReactiveDefine data,unnecessarypropsPassing data
      Then grandpa trapped his parents,Parents condoms son,Son condoms grandson,最后exist孙子组件里面获取ProvideInjectPage
      Information inside
    </div>
    <hr/>
    <provideGrandpa></provideGrandpa> <!--Grandpa Components-->
  </div>
</template>
 
<script lang="ts">
import {
  Vue, Component, Provide, ProvideReactive,
} from 'vue-property-decorator';
import provideGrandpa from '@/components/';
 
@Component({
  components: { provideGrandpa },
})
export default class ProvideInjectPage extends Vue {
  @Provide() foo = Symbol('fooaaa');
 
  @ProvideReactive() fooReactive = 'fooReactive';
 
  @ProvideReactive('1') fooReactiveKey1 = 'fooReactiveKey1';
 
  @ProvideReactive('2') fooReactiveKey2 = 'fooReactiveKey2';
 
  created() {
     = Symbol('fooaaa111');
     = 'fooReactive111';
    this.fooReactiveKey1 = 'fooReactiveKey111';
    this.fooReactiveKey2 = 'fooReactiveKey222';
  }
}
</script>
 
// ...provideGrandpa calls parent component<template>
  <div class="hello">
    <ProvideParentComponent></ProvideParentComponent>
  </div>
</template>
 
// ...ProvideParentComponent calls son component<template>
  <div class="hello">
    <ProvideSonComponent></ProvideSonComponent>
  </div>
</template>
 
// ...ProvideSonComponent calls grandchild component<template>
  <div class="hello">
    <ProvideGSonComponent></ProvideGSonComponent>
  </div>
</template>
 
 
// Grandson component <ProvideGSonComponent>, after multiple layers of reference, you can get the data of the outermost component provided by using Inject in the grandson component&lt;template&gt;
  &lt;div class="hello"&gt;
    &lt;h3&gt;The components of the grandson&lt;/h3&gt;
    Grandpa Components里面的foo:{{}}&lt;br/&gt;
    Grandpa Components里面的fooReactive:{{fooReactive}}&lt;br/&gt;
    Grandpa Components里面的fooReactiveKey1:{{fooReactiveKey1}}&lt;br/&gt;
    Grandpa Components里面的fooReactiveKey2:{{fooReactiveKey2}}
    &lt;span style="padding-left:30px;"&gt;=&gt; fooReactiveKey2NothingkeySo it can't be obtained&lt;/span&gt;
  &lt;/div&gt;
&lt;/template&gt;
 
&lt;script lang="ts"&gt;
import {
  Component, Vue, Inject, InjectReactive,
} from 'vue-property-decorator';
 
@Component
export default class ProvideGSonComponent extends Vue {
  @Inject() readonly foo!: string;
 
  @InjectReactive() fooReactive!: string;
 
  @InjectReactive('1') fooReactiveKey1!: string;
 
  @InjectReactive() fooReactiveKey2!: string;
}
&lt;/script&gt;