Several forms of Vue components

Components can be defined in three forms in Vue +typescript

  • Class components
  • Extend the component
  • Function component

Class components

The component we use most frequently in the TS project can use our decorators to make components perfectly typescript compliant.

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
  name: 'Demo'
})
export default class extends Vue{}
</script>
Copy the code

Extend the component

The same way you would use vUE, but without decorators.

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
</script>
Copy the code

Function component

If you’ve used React, you know that React has functional components that perform better than other components but have no life cycle.

<template functional> <div> <h3> </h3> </div> </template>Copy the code

Understand how class components are written

The TS project needs vue-property-decorator. This library relies entirely on vue-class-Component and provides the following decorators:

  • @PropParameter passing
  • @WatchMonitoring data
  • @RefComponents of the ref
  • @EmitTo specify an event emit, either use this modifier or use this.$emit() directly.
  • @MixinsMixins injection
  • @Model v-model
  • @Component

@Component –> Component

The @Component decorator can receive an object as a parameter and declare components, filters, directives, etc. There is no decorator option

<script lang="ts"> import { Component, Vue } from 'vue-property-decorator' import HeaderComponent from '@/components/HeaderComponent.vue' import ResizeMixin from ".. /mixins" @Component({name: 'Demo', Components: {// Component HeaderComponent}, cache: {// Local directive test(el: HTMLElement, binding) { console.log(el, binding); }}, filters: {// local filter addOne(num: number) {return num + 1; } }, mixins: [ResizeMixin], }) export default class extends Vue{} </script>Copy the code

@prop –> Data accept parameters

@Prop() str1! : string; / / will pass @ Prop () str2: string | undefined; / / the will pass @ Prop ({default: "default"}) str3: string | undefined;Copy the code

Data –> Data binding

Private name = "private "; private age = 18; Private userInfo: userInfo = {name: "userInfo ", age: 39};Copy the code

The methods — > method

private addAge() {
  this.btn.style.background = "yellow";
  this.age += 1;
}
Copy the code

Computed –> Compute attributes

Get initUser() {return "computed age" + this.age; }Copy the code

@watch –> Listen for changes in data

interface UserInfo {
  name: string;
  age: number;
}
Copy the code
@watch ("age") handelChangeAge(newVal: number, oldVal: number) {console.log(" new data "+ newVal," old data "+ oldVal); } @watch ("userInfo", {deep: true, immediate: false}) handelChangeUserInfo(newVal: userInfo, oldVal: UserInfo) {console.log(" new data "+ newVal," old data "+ oldVal); }

@ref –> Get elements

<button type="button" and ref=" BTN "@click="addAge" class=" BTN ">
@Ref("btn") btn! : HTMLButtonElement;

Copy the code
addAge() {
this.btn.style.background = "yellow";
}

@emit –> Publish events

// Child
<button @click="addStrClick">addStrClick</button>
<button @click="addStrClick2('1')">addStrClick</button>
Copy the code
@Emit()
addStrClick() {
return "1";
}
@Emit()
addStrClick2(str) {
return str + 1;
}


// father
<Child @addStrClick="***" @addStrClick2="***" />
Copy the code

The life cycle

created() {
  console.log("created");
}
mounted() {
  console.log("mounted");
}
Copy the code

reference

  • Typescript+Vue large project construction + detailed exposition